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.

我正在构建一个 javascript 应用程序，它必须理解每一行中的最后一个单词（split在这种情况下）。目前我正在使用 CSSwhite-space属性来处理溢出文本。因此，浏览器不会告诉我它在哪里断线。那么，什么是理解每行最后一个单词的好功能呢？

编辑

我使用的是纯 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 上对这个问题的回答值得称赞。

于 2012-05-24T22:16:49.117 回答