截断div内的文本[重复]答案

【问题标题】：Truncating text inside a div [duplicate]截断div内的文本[重复]
【发布时间】：2013-03-02 14:21:15
【问题描述】：

我有一些动态文本（来自数据库），我需要放入 div

我的div 具有固定大小。但是，当文本变得太长时，它会分成两行。我想在较长文本的末尾添加三个点，以使它们适合一行。

例如：My really long text 变为 My really lo...

我已经进行了几次尝试，但基本上所有尝试都依赖于计数字符。也就是说，无论如何，并不是很幸运，因为字符没有固定的宽度。例如，大写的W 比小的i 宽很多

因此，我遇到了字符计数方法的两个主要问题：

如果文本有很多窄字符，它会被剪切并附加 ...，即使文本在修剪前实际上适合一行。
当文本包含许多宽字符时，即使我将其剪切到最大字符数并附加点，它也会以两行结束。

这里有没有考虑文本实际宽度而不是字符数的解决方案（JavaScript 或 CSS）？

【问题讨论】：

标签： javascript html css

【解决方案1】：

使用这些样式：

white-space: nowrap;      /*keep text on one line */
overflow: hidden;         /*prevent text from being shown outside the border */
text-overflow: ellipsis;  /*cut off text with an ellipsis*/

【讨论】：

别忘了设置display: inline-block;
对输入有用吗？

【解决方案2】：

除了ellipsis，我建议使用tooltip在鼠标悬停时显示整个文本。

fiddle

【讨论】：

【解决方案3】：

我建议Trunk8

然后，您可以使任何文本适合 div 的大小，它会修剪会导致超出 1 行的文本（可用于设置允许的行数）

例如

$('.truncate').trunk8();

【讨论】：

【解决方案4】：

您应该查看 css 省略号：http://www.w3schools.com/cssref/css3_pr_text-overflow.asp

【讨论】：