2 
このような div 要素にいくつかのテキストがあります

div{ 幅:100px; オーバーフロー:非表示;高さ:20px;}

ここで、div 要素のテキスト全体ではなく、表示されるテキストのみの長さを取得したいと考えています。

どうすればこれを達成できますか...

ありがとう

4

2 に答える 2

1

テキストボックスをnoに制限しないのはなぜですか。入力した文字数。いいえを確認できるデモにアクセスします。入力した文字数を制限して、ここをクリックして 同じ機能を実装し、目的に合わせて使用​​できます。

于 2012-05-21T12:17:23.810 に答える
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);

もちろん、この種のソリューションを使いすぎないほうがよいのですが、canvas なしではこれ以上直接的なものは見当たりません。そして、それは機能します。

別の (互換性の低い) 解決策は、DOM を変更する代わりにインメモリ キャンバスを使用することですが、css で定義された一部のテキスト変換 (または :before) を再現するのは難しい場合があります...

于 2012-05-21T12:43:36.597 に答える