2016-08-12 6 views
4

テキストの段落があるとします。最初のものは、私が何を持っているかを示しています。もう一つは私が持っていたいものです。だから、行の最後に3文字以下の単語があるのはそれだけです。私は彼らが次の行のbegenningになることを望む。行末に改行なしのスペース

"tempor"と "ex"の単語の間にスペース区切りを使用することはできますが、これは多くの仕事のようです。それを処理するCSSプロパティはないので、私はそれを扱う唯一の合理的な方法は、いくつかのJSを使ってそれを制御することだと思った。したがって、すべてのHTMLは、改行なしのサーバーから来て、JSコードはすべてのテキストを取得し、希望する場所に改行記号を付けません。これを制御するライブラリを使用する準備が整っていますか?これはそれを制御する良い方法ですか?これは、テキストの膨大なブロックで効率的になるのでしょうか?

enter image description here

+0

が、それは、[リンク](HTTPを動作する可能性があり、ここでの解決策を試してみてください。以下は

が変更されたブロックの追加のハイライトといくつかのサンプルコードです.com/cssref/css3_pr_word-break.asp) –

答えて

2

あなたが続い1から3文字の単語を一致させるために単語境界検出\bを使用して、正規表現を使用することができますその後、スペースを破損しないスペースに置き換えます。

しかし、このアプローチの潜在的な問題は、短い単語の長いシーケンスが(全体として)破られなくなるということです。 //www.w3schools:

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>

1

私は、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); 

     }); 
}); 
関連する問題