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的回答。

Javascript - 获取最后一个单词

1 个答案: