线条末端的非破坏空间

Question

让我们假设我有一段文字。第一个显示了我在这个地方所拥有的东西。第二个是我想要的。所以，这是关于在行尾有3个或更少字母的单词。我希望他们能够成为下一行的成员。

我可以在“tempor”和“ex”之间使用非破坏性的空间实体（依此类推），但这看起来像很多工作。由于没有CSS属性来处理它，我认为唯一合理的方法是使用一些JS来控制它。所以，所有的HTML都来自服务器，没有非破坏性的行，然后一个JS代码获取所有文本，并在所需的位置放置一个非破坏空间的标志。有没有准备好使用库来控制它？这是控制它的好方法吗？这对于大块文本是否有效？

Answer 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 }

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

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); 

     }); 
});