限制 Div 中的字数 [关闭]

Question

Here 是 3 个框所在的位置。它们都共享相同数量的字符。在框内，我需要限制文本，以便如果用户插入更多文本，最后一个单词后跟 ... 防止内容覆盖框。

我已经尝试过 text-overflow: ellipsis;

但我相信我用错了。就像我在每个框中添加更多文本一样，文本会覆盖该框。

Answer 1

text-overflow: ellipsis 仅适用于以下组合：固定宽度、溢出隐藏和white-space: nowrap; 省略号不适用于多行。

你应该使用这样的东西：http://www.mobify.com/blog/multiline-ellipsis-in-pure-css/

单行示例：Fiddle

.ellipsis {
    text-overflow: ellipsis;
    width: 150px;
    overflow: hidden;
    white-space: nowrap;
}

Answer 2

text-overflow 只有在设置了white-space: nowrap 时才会生效，这意味着您不能使用它来截断超过一行的文本。

这意味着您无法在服务器上截断文本或使用 javascript。有一些很好的 jQuery 插件可以解决这个问题，比如 dot dot dot 应该可以解决问题。