Question

我创建了一个将文本放入其中的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>

Answer 1

拼接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，如果你要比较父母和孩子的大小，它们的大小不应该相同（!!!）。 GL

无论如何，我更喜欢使用像

这样的css解决方案

 text-overflow:ellipsis;

请在此处阅读：http://www.w3schools.com/cssref/css3_pr_text-overflow.asp 要应用css解决方案，带文本的子节点应为INLINE;你可以将div改为span，或者放置css：

 display:inline;

Answer 2

我编写此代码并使用它：D lol

$(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+'......');
    }



});

如何删除div元素中文本的最后一个字符

2 个答案: