Javascript - 获取最后一个单词

Question

这是一个例子：

<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）。目前我使用CSS white-space属性来处理溢出文本。因此，浏览器不会给我一个线索的线索。那么，理解每一行中的最后一个单词会有什么好处呢？

编辑

我使用纯javascript，所以jQuery不是一个选项，white-space属性应用于div。所以实际上，将div视为线条渲染器。

Answer 1

您可以逐字重写整个句子，跟踪高度变化。以下是通过代码的一些解释：

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]);
        }
    }
}

这会将每行的最后一个单词记录到除最后一行之外的控制台。我把它留给你。这个解决方案的好处是，即使在窗口调整大小后它也能正常工作。

顺便说一句，Yi Jiang应该得到所有的信誉，因为他在这里对this question的回答。