Nicht brechender Platz am Ende der Zeile

Question

Nehmen wir an, ich habe einen Textabsatz. Der erste zeigt, was ich zur Zeit habe. Der zweite ist, was ich gerne hätte. Es geht also nur um die Wörter, die am Ende der Zeile 3 oder weniger Buchstaben haben. Ich möchte, dass sie bei der nächsten Zeile stehen.

Ich könnte eine nicht brechende Leerzeichen zwischen "tempor" und "ex" Wörter (und so weiter) verwenden, aber das sieht nach viel Arbeit aus. Da es keine CSS-Eigenschaft gibt, um damit umzugehen, dachte ich, der einzige vernünftige Weg, um es zu umgehen, ist die Verwendung einiger JS, um es zu steuern. Der gesamte HTML-Code kommt also vom Server ohne Zeilen, die nicht unterbrochen werden, und dann erhält ein JS-Code den gesamten Text und fügt ein Zeichen ohne Leerzeichen an den gewünschten Stellen ein. Gibt es bereit, Bibliotheken zu benutzen, um das zu kontrollieren? Ist das ein guter Weg, es zu kontrollieren? Wird das mit großen Textblöcken effizient sein?

Answer 1

Sie einen regulären Ausdruck \b mit Wortgrenze Erkennung verwenden könnten 1 bis 3-Zeichen Worte, gefolgt von einem entsprechen Leerzeichen, dann ersetzen Sie den Speicherplatz durch einen nicht brechbaren.

Ein mögliches Problem bei diesem Ansatz besteht jedoch darin, dass jede lange Folge kurzer Wörter (als Ganzes) nicht zerbrechlich wird.

Nachfolgend finden Sie einige Beispiel-Code mit einer zusätzlichen Markierung der Blöcke, die geändert werden:

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

ich nur Lösung mit JS gefunden können für dieses Problem helfen:

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

     }); 
});