javascript - 限制两个 div 中的最大总行数

Question

我知道如何使用(在这种情况下，n 是 2 行)在 n 行之后使用省略号来制作单个 div:

overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;

一对一有效 div但我有一个不同的问题。我有一些内容的标题和描述，我想将这两个字段本身限制为最多 3 行，但总共也限制为 5 行(而不是可能的最大值，在这种情况下为 6 行)。换句话说，如果标题是 3 行，我想在两行(带有省略号)之后剪切描述。
我如何实现这一点(最好没有或使用最少的 Javascript)？我现在只需要支持(移动)Safari。

Answer 1

getClientRects可以返回内联元素的行长。

const { length } = document.querySelector("h1 span").getClientRects();
length >= 3 && document.querySelector("p").style.setProperty("--line-clamp", 2);

div > * {
  --line-clamp: 3;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: var(--line-clamp);
  -webkit-box-orient: vertical;
}

<div>
  <h1><span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Natus repellendus ducimus minus met consectetur</span></h1>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi consectetur quo, perspiciatis, pariatur, deleniti enim molestiae sunt debitis aut nam iure cumque sint aperiam est! Vel temporibus atque excepturi sed!</p>
</div>