查找在div元素中显示的文本长度,该元素已隐藏溢出

时间:2012-05-21 12:09:10

标签: jquery css3

 some text is here in div element like this 

div {width:100px;溢出:隐藏;高度:20像素;}

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

我怎样才能实现这一目标......

谢谢

2 个答案:

答案 0 :(得分:1)

为什么不将文本框限制为否。输入的字符数。你访问一个演示,你可以检查否。输入字符并设置限制 click here 您可以使用相同的功能并将其用于您的目的。

答案 1 :(得分:1)

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

您可以在那里进行测试: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)可能难以重现......