15

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

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

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

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

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

  1. 如果文本有许多窄字符，它会被剪切并附加...，即使文本在修剪前实际上适合一行。

  2. 当文本包含许多宽字符时，即使我将其剪切到最大字符数并附加点，它也会以两行结束。

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

4

4 回答 4

50

使用这些样式：

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*/
于 2013-03-14T09:51:55.923 回答
4

除此之外ellipsis，我建议在鼠标悬停时使用tooltip.

小提琴

于 2013-03-14T09:56:43.363 回答
3

我建议Trunk8

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

例如

$('.truncate').trunk8();
于 2013-03-14T09:56:52.827 回答
1

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

于 2013-03-14T09:50:44.850 回答