如何包装 HTML 内容？

【问题标题】：How to wrap up HTML contents?如何包装 HTML 内容？
【发布时间】：2019-04-22 03:11:05
【问题描述】：

如果 HTML 包含说：

<div>1222222222222234c dssdsdf sdfsdfsdf</div>

如何包装限制为 10 个字符的内容，然后可能会显示 (12222222..) 两个点。

【问题讨论】：

用php来缩短字符串不是最好吗？

标签： javascript html css

【解决方案1】：

使用jQuery我们可以这样做

$(function(){
  $('div').each(function(){
    if($(this).text().length > 10) {
      var text = $(this).text();
      text = text.substr(0,10);
      $(this).text(text+"...");
    }
  })
})

【讨论】：

【解决方案2】：

你可以使用

text-overflow: ellipsis

但对于跨浏览器解决方案，您必须拆分字符串，然后在所需长度后附加 .。

【讨论】：

浏览器支持很弱。
不过我还是喜欢 CSS3 的答案。

【解决方案3】：

由于 text-overflow: ellipsis 仅“受 IE7-、Safari 和 Konqueror 支持” - 您可能需要一个 javascript 解决方案：

这篇写的不错：

http://tpgblog.com/2009/12/21/threedots-the-jquery-ellipsis-plugin/

【讨论】：

【解决方案4】：

This 应该是你想要的。 More

【讨论】：

【解决方案5】：

aaaaaaaaaa<wbr/>cccccccccc

想法不在同一行，但这是一件好事，当且仅当文本不适合空间时，它才会包装文本。方便与消息一起使用。

【讨论】：