在多行 div 中隐藏部分溢出的文本？答案

【问题标题】：Hiding partly overflowing text in a multi-line div?在多行 div 中隐藏部分溢出的文本？
【发布时间】：2015-07-08 19:34:08
【问题描述】：

如何删除或隐藏部分溢出的文本行？示例：

HTML：

<div>Lot of interesting text in this multi-line box but how do I remove or hide the last line</div>

CSS：

div {
    border: 1px solid black;
    height:65px;
    width:150px;
    overflow:hidden;
}

https://jsfiddle.net/7mudnnco/

编辑：我想要的结果图片：

编辑2：这个similar question 有一个几乎可以工作的解决方案，但我正在寻找一个解决方案，当没有线条完全可见时，所有线条都被隐藏。一个几乎可以工作的解决方案：http://jsfiddle.net/4Fpq2/9/（将高度更改为 15px 以查看它为什么不能完全工作）

【问题讨论】：

我不确定我是否理解。你想避免换行吗？
单行省略号属性可用，但多行则需要编程方法
CSS: Can you prevent overflow: hidden from cutting-off the last line of text?的可能重复
在该问题中发布的解决方案 (jsfiddle.net/4Fpq2/9) 几乎就在那里，但在我的情况下不能 100% 工作。如果我什至没有完全可见的一行，我希望该框为空。在解决方案中编辑高度以显示问题：jsfiddle.net/4Fpq2/283

标签： javascript jquery html css overflow

【解决方案1】：

如果字体大小和框大小已知，您可以简单地设计框，使其恰好包含 3 行文本，一种方法是：

div {
    border: 1px solid black;
    height:65px;
    width:150px;
    overflow:hidden;
    line-height: 22px;   
}

【讨论】：

但这会改变默认line-height。
不幸的是不是这样，盒子可以有任何高度。
您可以使用许多其他属性来实现不会断线的设计，行高就是一个例子，或者您可以添加一些填充，或者使字体更大一点或框小一点。你明白了……
如果事先不知道高度，您可以使用一些javascript来测量实际高度并相应地调整其他属性。但是如果盒子高度未知，也许你根本不需要指定它的高度，所以它会根据内容调整嗯？
高度未知但固定且无法更改。一个javascript解决方案可能是可能的，但我认为不必要的复杂。看看上面问题 cmets 中几乎可以工作的 CSS 解决方案，看看是否可以解决。

【解决方案2】：

像这样：

div {
    border: 1px solid black;
    line-height: 2.5ex; /* <-- default value */
    height: 7.5ex;      /* 3 * 2.5ex = 7.5ex (3 rows) */
    width:150px;
    overflow:hidden;
}

JSFiddle

【讨论】：

这在行数未知的情况下不起作用，对吧？
你可以使用jquery和动态改变高度属性。 $('div').css('height', numberOfLines * lineHeight);