Javascript - 获取一行中的最后一个单词答案

【问题标题】：Javascript - Getting the last word in a lineJavascript - 获取一行中的最后一个单词
【发布时间】：2012-05-24 21:01:39
【问题描述】：

这是一个例子：

<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 视为线渲染器。

【问题讨论】：

线条是否总是被 span 包裹？ jQuery 是一个选项还是只是普通的 JS？
@JosephtheDreamer，我已经更新了问题。
stackoverflow.com/questions/5673752/…
@msanford，我已经检查过这个问题，但它没有回答我的问题。它实际上会返回每个元素中的最后一个单词，而不是行中的最后一个单词。
@JosephtheDreamer 我认为缺少的 jQuery 标签足以回答您的第二个问题

标签： javascript word-wrap

【解决方案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 在 SO 上对this question 的回答值得称赞。

【讨论】：