查找显示在隐藏溢出的 div 元素中的文本长度答案

【问题标题】：Find a text length which is display in div element that has overflow hidden查找显示在隐藏溢出的 div 元素中的文本长度
【发布时间】：2012-05-21 20:51:46
【问题描述】：

 像这样的 div 元素中有一些文本

div{ 宽度:100px;溢出：隐藏；高度：20px；}

现在，我只想获取可见文本的长度，而不是 div 元素的整个文本。

我怎样才能做到这一点...

谢谢

【问题讨论】：

虽然和你问的不完全一样，但我认为这个 StackOverflow 问答正是你想要的：stackoverflow.com/questions/4934807/…

标签： jquery css

【解决方案1】：

为什么不将文本框限制为否。输入的字符数。您访问一个演示，您可以在其中检查编号。输入的字符数并限制 click here 您可以实现相同的功能并将其用于您的目的。

【讨论】：

【解决方案2】：

我觉得这个问题很有趣，所以我设计了一种方法来有效地测量可见文本的字符长度。

你可以在那里测试它：http://jsfiddle.net/6nYFb/

这个想法是迭代地填充文本，直到达到 100px 宽度。

CSS：

#txt{ max-width:100px; overflow:hidden;height:20px;}

HTML：

<span id=txt>My long text is long. My long text.My long text. My long text... My long text. My long text, so long...</span>
<br>Nb chars : <span id=mes></span>

JS：

var text = $('#txt').text();
var nbchars = 0;
$('#txt').html('');
var increment = function() {
    $('#txt').html(text.substring(0, nbchars));
    if (nbchars<text.length-1 && $('#txt').width()<100) {
        nbchars++;
        window.setTimeout(increment, 1);
    } else {
        $('#mes').html(nbchars);
    }
};
window.setTimeout(increment, 1);

当然，最好不要过度使用这种解决方案，但我没有看到没有画布更直接的东西。它有效。

另一个（兼容性较差）的解决方案可能是使用内存画布而不是修改 DOM，但是在 css 中定义的某些文本转换（或 :before）可能难以重现...

【讨论】：