線條末端的非破壞空間

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

     }); 
});