行尾的非中断空间答案

【问题标题】：Non breaking space at the end of the line行尾的非中断空间
【发布时间】：2016-08-12 12:11:02
【问题描述】：

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

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

【问题讨论】：

试试这里的解决方案，它可能会工作link

标签： javascript html

【解决方案1】：

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

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

以下是一些示例代码，其中对已修改的块进行了额外的突出显示：

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 }

&lt;p id="output1"&gt;&lt;b&gt;Before:&lt;/b&gt;&lt;br&gt;&lt;/p&gt;&lt;p id="output2"&gt;&lt;b&gt;After:&lt;/b&gt;&lt;br&gt;&lt;/p&gt;

【讨论】：

【解决方案2】：

我发现只有使用 JS 的解决方案才能解决这个问题：

$(function() {
    $('p, li').each(function() {
            var text = $(this).html();
            text = text.replace(/(\s)([\S])[\s]+/g,"$1$2&nbsp;"); //one char
            text = text.replace(/(\s)([^<][\S]{1})[\s]+/g,"$1$2&nbsp;"); //two char
            text = text.replace(/(\s)([^<][\S]{1}.)[\s]+/g,"$1$2&nbsp;"); //two char with dot
            $(this).html(text);

        });
});

【讨论】：