0

テキストを入れる 1 つの div を作成します。このdivのテキストの幅をjQueryで計算したい。テキストの幅が親要素よりも大きいかどうかを確認し、最後の文字を削除してテキストの新しい幅を確認し（最後の文字なしで）、親要素よりも大きい場合は親要素の幅と比較して、この作業を続行します（最後の文字を削除して幅を確認します）それ以外の場合親要素の小さい方の場合は、最後のテキストに「 ... 」を入れます

この私のコードは私を案内してください: 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 にも注意してください。親と子のサイズを比較する必要がある場合は、同じサイズであってはなりません (!!!)。GL

とにかく、次のようなcssソリューションを使用することをお勧めします

 text-overflow:ellipsis;

こちらをお読みください: http://www.w3schools.com/cssref/css3_pr_text-overflow.asp css ソリューションを適用するには、テキストを含む子ノードをインラインにする必要があります。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 に答える