文本溢出省略号

Question

如果文本太长，我正在尝试在文本末尾添加省略号。

我目前使用的css是：

style='text-overflow: ellipsis; white-space: nowrap; overflow: hidden;'

我当前的文本应该占几行，以填充 div 然后有省略号，但是，这个 css 在第一行的末尾截断了文本。如何让省略号仅在 div 被文本填充时出现？

示例：

这就是我想要的；

"This is an example bit of text
that should go over multiple lines..."

这就是我得到的；

"This is an example bit of text...

谢谢。

Answer 1

text-overflow:ellipsis 仅适用于单行文本。解释 here.. 我建议使用 JS.. 就像文章建议的那样。当达到允许的最大字符数时，您可以在何处附加省略号。

function shorten(text, maxLength) {
    var ret = text;
    if (ret.length > maxLength) {
        ret = ret.substr(0,maxLength-3) + "...";
    }
    return ret;
}

文本溢出省略号

Text overflow elipsis

html

css

text

overflow