线末端的非破碎空间

Question

我们假设我有一段文字。第一个显示我在妈妈身上所拥有的东西。第二个是我想要的。所以，这就是在行尾有3个或更少字母的单词。我希望他们能够成为下一行的代名词。

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

Answer 1

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

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

下面是一些示例代码，其中突出显示了已修改的块：

＆＃13;

＆＃13;

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;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

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

$(function() {
    $('p, li').each(function() {
            var text = $(this).html();
            text = text.replace(/(\s)([\S])[\s]+/g,"$1$2 "); //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);

        });
});