截断div中的文本

Question

我有一些动态的文本(来自我的数据库),我需要适合我的div.

我的div有一个固定的大小,但是当文本变得很长时会变成两行.如果文本很长,我想在末尾放三个点使其适合一行.

所以例如div变成了div

我尝试了几次尝试,但基本上所有尝试都依赖于以某种方式计算字符.这并不是真的很幸运,因为角色没有固定的宽度.例如,大写W比小i宽得多.

因此我在字符计数方法上遇到两个问题:

1. 如果文本有许多狭窄的字符,它会被剪切并附加...,即使文本实际上也适合一行甚至是原始形式.

2. 该文本包含许多宽字符,即使在将其切割为最大字符数并附加点后,它最终会出现两行.

这里是否有任何解决方案(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*/