用“...”替换太长的字符串

Question

假设我们有一个 <div style="width:100px;">This text is too long to fit</div>

div 中的文本是动态的。而且我想强制文本适应宽度而不是中断。所以我需要某种功能来测试文本是否适合，如果不适合，那么我想显示实际适合的文本部分。并将 ... 添加到末尾。

文本太长的结果应该是这样的： "This text is..."

有没有一些标准的方法来做我想做的事？通过 javascript、jquery、jsp 还是 java？

谢谢！

编辑：感谢您的快速回答！我在 Java 中通过猜测适合多少个字符来做到这一点。这似乎不是最佳解决方案，所以这就是我来这里的原因。

css 解决方案非常适合我。它对 Firefox 不起作用没什么大不了的，因为我的客户无论如何都使用 IE。 :)

原文由 user829237 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

你可以用 css3 使用 text-overflow:ellipsis http://www.css3.com/css-text-overflow/

或者如果你坚持使用 js 方式，你可以将文本节点包裹在你的 div 中，然后将包裹的宽度与父级的宽度进行比较。

原文由 meo 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

如果要处理数据，可以使用函数：

 function TextAbstract(text, length) {
    if (text == null) {
        return "";
    }
    if (text.length <= length) {
        return text;
    }
    text = text.substring(0, length);
    last = text.lastIndexOf(" ");
    text = text.substring(0, last);
    return text + "...";
}

text = "I am not the shortest string of a short lenth with all these cows in here cows cows cows cows";

alert(TextAbstract(text,20));

编辑：处理文本中超长的所有 div：

     var maxlengthwanted=20;

    $('div').each(function(){
        if ($('div').text().length > maxlengthwanted)
            $(this).text(TextAbstract($(this).text()));
    });

编辑：更紧凑的版本来处理文本中超长的所有 div，在空格处中断。

 function textAbstract(el, maxlength = 20, delimiter = " ") {
  let txt = $(el).text();
  if (el == null) {
    return "";
  }
  if (txt.length <= maxlength) {
    return txt;
  }
  let t = txt.substring(0, maxlength);
  let re = /\s+\S*$/;
  let m = re.exec(t);
  t = t.substring(0, m.index);
  return t + "...";
}

var maxlengthwanted = 23;

$('.makeshort').each(function(index, element) {
  $(element).text(textAbstract(element, maxlengthwanted, " "));
});

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="makeshort">This is a fun thing to process, modification of this is going to just be soo much fun</div>
<div class="makeshort">second This is a fun thing to process, modification of this is going to just be soo much fun</div>
<div class="makeshort">IBShort Wilson</div>
<div class="makeshort">another This is a fun thing to process, modification of this is going to just be soo much fun</div>
<div class="makeshort">more This is a fun thing to process, modification of this is going to just be soo much fun</div>
<span class="makeshort">Me also, a span that is a fun thing to process, modification of this is going to just be soo much fun</span>
<span class="makeshort">more This is a fun thing to process, modification of this is going to just be soo much fun</span>
<ul>
  <li class="makeshort">li1 more This is a fun thing to process, modification of this is going to just be soo much fun</li>
  <li class="makeshort">li 2 more This&#10;is a&#10;fun thing to process, modification of this is going to just be soo much fun</li>
  <li class="makeshort">li 3 also more&#20;This&#09;is&#09;a fun thing to process, modification of this is going to just be soo much fun</li>
  <li class="makeshort">li 4 also more This&nbsp;is&nbsp;fun thing to process, modification of this is going to just be soo much fun</li>
</ul>

原文由 Mark Schultheiss 发布，翻译遵循 CC BY-SA 4.0 许可协议