Question

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

我的div有固定的尺寸。但是，当文本变得太长时，它会分成两行。我想在较长文本的末尾加上三个点，使它们适合单行。

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

我已经做了几次尝试，但基本上所有的尝试都依赖于计算字符。也就是说，不是真的很幸运，因为角色没有固定的宽度。例如，大写W比小i

宽得多

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

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

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

Answer 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*/

Answer 2

我建议Trunk8

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

E.g

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

Answer 3

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

fiddle

Answer 4

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

截断div中的文本

4 个答案: