3

次に例を示します。

<div><span style="font-size:15px;">some text here which is </span>
<span style="color:red;">split automatically by the browser.</span></div>

ブラウザがレンダリングするもの（もちろんスタイル付き）：

some text here which is split
automatically by the browser.

各行の最後の単語（splitこの場合）を理解する必要があるJavaScriptアプリケーションを構築しています。現在、CSSwhite-spaceプロパティを使用してオーバーフローテキストを処理しています。したがって、ブラウザはどこで境界線を壊すのかについての手がかりを私に与えません。では、各行の最後の単語を理解するための優れた関数は何でしょうか。

編集

私はpure-javascriptを使用しているので、jQueryはオプションではなく、white-spaceプロパティはに適用されますdiv。divしたがって、実際には、をラインレンダラーと考えてください。

4

1 に答える 1

2

高さの変化を追跡しながら、文全体を単語ごとに書き直すことができます。コードによる説明は次のとおりです。

HTML:

<div id="flop" class="foobar">Lorem ipsum dolor sit amet, consectetur adipisicing 
elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim 
ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea 
commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit 
esse cillum dolore eu fugiat nulla pariatur.</div>
<br>
<button value="Go" onclick="foo();">Go</button>​​​​​​​​​​​​​​​​​​​​​​​​​​​​

脚本：

function foo(){
    var d = document.getElementById('flop');
    var t = d.innerHTML;
    var w = t.split(' ');       

    d.innerHTML = w[0];
    var height = d.clientHeight;
    for(var i = 1; i < w.length; i++){
        d.innerHTML = d.innerHTML + ' ' + w[i];

        if(d.clientHeight > height){
            height = d.clientHeight;
            console.log(w[i-1]);
        }
    }
}

これにより、最後の行を除く各行の最後の単語がコンソールに記録されます。私はそれをあなたに任せます。このソリューションの良い点は、ウィンドウのサイズを変更した後でも正しく機能することです。

ところで、ここ SO でのこの質問に対する彼の回答は、 Yi Jiangの功績によるものです。

于 2012-05-24T22:16:49.117 に答える