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无论如何。：）

Answer 1

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

使用css3

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

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>

Answer 3

if(text.length > number_of_characters) {
   text = text.substring(from, to);
}

Answer 4

使用JavaScript的一个班轮

下面的内容用省略号将字符串截断为10个字符。如果截断的字符串的长度小于限制（在下面的示例中为10），则不会在输出中添加省略号。

const output = "abcdefghijk".split('', 10).reduce((o, c) => o.length === 9 ? `${o}${c}...` : `${o}${c}` , '');

Answer 5

text-overflow: ellipis

div {
    text-overflow:  ellipsis
}

FireFox 7 http://caniuse.com/#search=text-overflow

将支持

Answer 6

如果您向div添加id标记，则可以使用document.getElementById("divid").innerHTML获取div的内容。从那里，您可以使用.length来获取字符串的长度。如果字符串的长度超过某个阈值，只需取一个子字符串并附加“...”。

但是，如果可以的话，你应该尝试使用服务器端。依靠Javascript / CSS为用户正确格式化它是一个不太理想的解决方案。

Answer 7

尝试使用CSS text-overflow属性。

Answer 8

更可能的情况是，你不可能知道在dom元素中有多少个字符，因为它有自己的字体等等。 CSS3目前不是一个选项（对我来说无论如何）。因此，我在屏幕外创建了一个小div，并将测试字符串插入其中，直到宽度正确为止：

var text = 'Try to fit this text into 100 pixels!';
var max_width = 100;

var test = document.createElement('div');
test.className = 'Same Class as your real element';  // give it the same font, etc as a normal button
test.style.width = 'auto';
test.style.position = 'absolute';
test.style.left = '-2000px';
document.body.appendChild(test);            
test.innerHTML = text;

if ($(test).width() > max_width) {

    for (var i=text.length; i >= 0; i--) {
        test.innerHTML = text.substring(0, i) + '...';
        if ($(test).width() <= max_width) {
            text = text.substring(0, i) + '...';
            break;
        }
    }
}

document.body.removeChild(test);

Answer 9

使用JavaScript缩短变量的最简单方法：

function truncate(string, length){
    if (string.length > length)
        return string.substring(0,length)+'...';
    else
        return string;
};

受到这个答案的启发：I want to truncate a text or line with ellipsis using JavaScript

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

9 个答案: