使用CSS隐藏不垂直的文本

如果我有下面这样的东西，那么如何隐藏不完全匹配的线条？在本例中，只有前两行完全适合我的默认字体，但第三行仅部分适合。我希望这一行完全消失，类似于文本溢出，但高度

<div style="position: absolute; top: 85%; bottom: 10%; overflow: hidden;">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ac condimentum est. Nunc sit amet arcu ut turpis pulvinar fringilla. Mauris et quam bibendum, euismod enim sit amet, tempor ante. Praesent vel consequat sapien, non tristique massa.
</div>

对我来说，这就是它的样子，我想去掉Mauris et之后的那句话：

---

我所知道的唯一一件事就是一个。其他浏览器可能还有其他解决方案。您还可以查看：

---

但是，我会避免这种情况，如果可以的话，我会将高度设置为2行文本。因此，如果行高为15px，则将两行的高度设置为30px，前提是没有任何其他边距或填充。

我所知道的唯一一件事是一个。其他浏览器可能还有其他解决方案。您还可以查看：

---

但是，我会避免这种情况，如果可以的话，我会将高度设置为2行文本。因此，如果行高为15px，则将2行的高度设置为30px，前提是没有任何其他边距或填充。

可以取div高度的一半，并将该值应用于行高，如下所示：

<div style="height: 2.8em; line-height: 1.4em; overflow: hidden; background: lightblue;">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ac condimentum est. Nunc sit amet arcu ut turpis pulvinar fringilla. Mauris et quam bibendum, euismod enim sit amet, tempor ante. Praesent vel consequat sapien, non tristique massa. Maecenas ultricies semper tellus ac condimentum. Integer imperdiet aliquam sapien, at porta dolor commodo ac. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque viverra nulla ut turpis fringilla auctor. In iaculis euismod lorem, ut eleifend libero rhoncus a. Vestibulum egestas rhoncus sem, vel ultricies enim lobortis at.
</div>

---

这似乎适用于任何高度，只要将行高度设置为容器高度的倍数。例如，高度为6.3em、线高度为2.1em的div将完全适合6.3/3=2.1em。此外，6.3em/2=3.15em，可能间距太大，但可以取3.15em，再除以2，得到1.575em，这也非常适合文本。

可以取div高度的一半，并将该值应用于行高，如下所示：

<div style="height: 2.8em; line-height: 1.4em; overflow: hidden; background: lightblue;">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ac condimentum est. Nunc sit amet arcu ut turpis pulvinar fringilla. Mauris et quam bibendum, euismod enim sit amet, tempor ante. Praesent vel consequat sapien, non tristique massa. Maecenas ultricies semper tellus ac condimentum. Integer imperdiet aliquam sapien, at porta dolor commodo ac. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque viverra nulla ut turpis fringilla auctor. In iaculis euismod lorem, ut eleifend libero rhoncus a. Vestibulum egestas rhoncus sem, vel ultricies enim lobortis at.
</div>

---

---

这似乎适用于任何高度，只要将行高度设置为容器高度的倍数。例如，高度为6.3em、线高度为2.1em的div将完全适合6.3/3=2.1em。另外，6.3em/2=3.15em，可能间距太大，但可以取3.15em，再除以2，得到1.575em，也非常适合文本。

只需将高度设置为2.4em即可。这是一把工作小提琴：

只需将高度设置为2.4em。这是一把工作小提琴：

只需将高度的大小更改为2.4，它就会将其删除高度非常重要。您能否澄清一下，您无法控制此处的高度，但仍然存在溢流？那将是一把更合适的小提琴。事实上，您的小提琴并没有真正再现问题。@TravisJ，问题和小提琴已更新。@rid-在新的小提琴中，我只看到一行文本。@TravisJ，如果您根据屏幕大小调整窗口大小，您将看到1.5。使用顶部和底部属性将使其更清晰。这就是我最初使用2.8em的原因，因为这几乎肯定会使问题变得明显。只需将高度的大小更改为2.4，它就会消除高度。高度非常重要。您能否澄清一下，您无法控制此处的高度，但仍然存在溢流？那将是一把更合适的小提琴。事实上，您的小提琴并没有真正再现问题。@TravisJ，问题和小提琴已更新。@rid-在新的小提琴中，我只看到一行文本。@TravisJ，如果您根据屏幕大小调整窗口大小，您将看到1.5。使用顶部和底部属性将使其更清晰。这就是我最初使用2.8em的原因，因为这几乎肯定会造成问题。正如我所说，高度不是固定的。高度是父项的百分比。很抱歉，我的错误是使用线条高度或字体大小，但这会改变整个设计。我需要保持字体大小和行距不变。如果元素是隐藏的，那么使用if是什么意思？就像我刚才说的，高度不是固定的。高度是父项的百分比。很抱歉，我的错误是使用线条高度或字体大小，但这会改变整个设计。我需要保持字体大小和行距不变。如果元素是隐藏的，那么使用if是什么意思？在这个位置有一个织布机不幸的是，我没有固定的高度，而是一个百分比。抱歉，当我查看你的问题时，我看到你的div有固定的值，所以我继续。不幸的是，我没有固定的高度，很抱歉，当我看到你的问题时，我看到你的div有固定的值，所以我接着说。-webkit线夹看起来几乎完美！我也只针对某个WebKit浏览器，所以这会很好地解决问题。有没有类似的东西没有几行？啊，现在我明白这是怎么回事了。。。我没有给它一个高度，而是根据我指定的行数自动计算高度。。。当然不是很理想，但它可以与一些设计更改一起工作……如果没有javascript，我不这么认为。您需要将实际高度除以线高度，四舍五入到最接近的整数，并将其设置为线夹的css值。事实上。。。理想情况下，它只会切断不需要的线路

---

装在任意大小的容器中。我可以使用JavaScript计算有多少行以及容器有多大，然后相应地设置行钳制值。-webkit行钳制看起来几乎完美！我也只针对某个WebKit浏览器，所以这会很好地解决问题。有没有类似的东西没有几行？啊，现在我明白这是怎么回事了。。。我没有给它一个高度，而是根据我指定的行数自动计算高度。。。当然不是很理想，但它可以与一些设计更改一起工作……如果没有javascript，我不这么认为。您需要将实际高度除以线高度，四舍五入到最接近的整数，并将其设置为线夹的css值。事实上。。。理想情况下，它只会切断不适合任意大小容器的管线。我可以使用JavaScript计算有多少行以及容器有多大，然后相应地设置行钳制值。