javascript - 行尾不间断空格

Question

假设我有一段文字。第一个显示了我现在所拥有的。第二个是我想要的。所以，这都是关于行尾有 3 个或更少字母的单词。我希望它们位于下一行的开头。

我可以在“tempor”和“ex”字词(等等)之间使用一个不间断的空格实体，但这看起来工作量很大。由于没有 CSS 属性来处理它，我认为解决它的唯一合理方法是使用一些 JS 来控制它。因此，所有 HTML 都来自服务器而没有不间断行，然后 JS 代码获取所有文本并在所需位置放置一个不间断空格符号。有没有现成可用的库来控制它呢？这是控制它的好方法吗？这对于大块文本是否有效？

Answer 1

您可以使用带词边界检测的正则表达式 \b 来匹配后跟空格的 1 到 3 个字符的词，然后用不可破坏的空格替换空格。

但是，这种方法的一个潜在问题是任何长的短词序列都变得不可破坏(作为一个整体)。

下面是一些示例代码，其中额外突出显示了已修改的 block :

var text = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras dictum, mauris eget varius iaculis, lorem dolor luctus ante, sit amet lobortis mauris nibh vitae metus. Quisque imperdiet massa eu consectetur venenatis. Vivamus vitae tortor dolor. Nam ac neque a quam ultrices euismod quis ultricies arcu. Duis feugiat tortor ac enim commodo pharetra. Praesent commodo nisl quis diam consequat molestie. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In a leo in elit accumsan maximus. Mauris vitae egestas eros. Quisque a augue a velit suscipit vehicula quis id dui.';

var formatted = text.replace(/(\b\w{1,3}\b) /g, '<span>$1&nbsp;</span>');

document.getElementById('output1').innerHTML += text;
document.getElementById('output2').innerHTML += formatted;

p { width:290px; float:left; margin-left:10px; text-align:justify }
span { background-color:#ff8; border: 1px dotted #777 }

<p id="output1"><b>Before:</b><br></p><p id="output2"><b>After:</b><br></p>