Javascript 截断div中的文本

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

div

我的

div

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

例如：

My really long text

变成

My really lo…

我做了几次尝试，但基本上所有的尝试都依赖于计算字符数。这是，无论如何，不是真的幸运，因为字符没有固定的宽度。例如，大写字母

W

比小写字母

i

宽得多

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

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

当文本包含许多宽字符时，即使在我将其剪切到最大字符数并添加点之后，它也会出现在两行上

---

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

您应该看看CSS省略号：

使用以下样式：

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

---

除了

省略号

，我建议使用

工具提示

在鼠标悬停时显示整个文本

我建议

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

例如

---

不要忘记设置

display:inline块它对输入有效吗？
$('.truncate').trunk8();