0

我创建了一个将文本放入其中的 div。我想用 jQuery 计算这个 div 中文本的宽度。并检查文本的宽度是否大于父元素删除最后一个字符并检查文本的新宽度（没有最后一个字符）并与父元素的宽度进行比较，如果父元素更大，则继续这项工作（删除最后一个字符并检查宽度）否则如果较小的父元素在最后一个文本中放置“ ... ”

这是我的代码，请指导我：http: //jsfiddle.net/bw25w/

<div id="text-messege">
    <div>my name is mamal and I'm so alone....ohhhh my god help me!!! :( I love you guys.you are so good</div>
</div>
4

2 回答 2

2

拼接 1 个符号，直到容器更高（或更宽）

var $container  = $("#text-messege")
 var $block  = $container.find("div");
 while($block.height()>$container.height()){
    $block.text($block.text().splice(-1))
 }

http://jsfiddle.net/QMZUK/

将周期更改为

while($block.width()>$container.width())

如果您必须验证宽度。还要注意css，如果你必须比较父母和孩子的大小，他们不应该是相同的大小（！！！）。总帐

无论如何，我更喜欢使用 css 解决方案，例如

 text-overflow:ellipsis;

在这里阅读：http: //www.w3schools.com/cssref/css3_pr_text-overflow.asp 要应用 css 解决方案，带有文本的子节点应该是 INLINE；您可以将 div 更改为 span，或放置 css：

 display:inline;
于 2013-09-03T09:49:29.087 回答
1

我编写了这段代码并开始工作：D 大声笑

$(function(){
    var widparent = ($('#text-messege').width())*1.5;
    var matn1 = $('#mamal').text();
    var spantest1 = '<span class="msg">' + matn1 + '</span>';
    $('body').append(spantest1);
    var widtext  = $('body .msg').width();
    $('body .msg').remove();

    if(widtext > widparent){
        var spanstr = null;
        var widstr = null;
        do{
            var str = matn1.substring(0, matn1.length-1);
            spanstr = '<span class="str">' + str + '</span>';
            $('body').append(spanstr);
            var widstr  = $('body .str').width();
            var valuestr = $('body .str').text();
            $('body .str').remove();
            matn1 = valuestr;
            //console.log(matn1);
            console.log(widstr,widparent);

        }while(widstr >= widparent);

        console.log(matn1);
        $('#mamal').text(matn1+'......');
    }



});
于 2013-09-03T10:15:49.797 回答