CSSのワードラップが正常に動作しない

Question

以下の例でワードラッププロパティが正しく動作しないのはなぜですか？

http://jsfiddle.net/k5VET/739/

私は、最初の行自体に収まる「consectetur」単語の一部を確保するために何ができますか？私は、各行に最大文字数を収める必要があります。

CSSは次のとおりです。

#fos { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; 
    font-size:14px; 
    font-weight: normal; 
    line-height: 18px; 
    width: 238px; 
    height:38px; 
    cursor: pointer; 
    word-wrap:break-word; 
    border:2px solid; } 

Answer 1

使用word-break: break-all;

#fos { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; 
    font-size:14px; 
    font-weight: normal; 
    line-height: 18px; 
    width: 238px; 
    height:38px; 
    cursor: pointer; 
word-break: break-all; 
    border:2px solid; } 

LIVE DEMO

Answer 2

ブラウザが原因への道だろう自動ハイフネーションを（適用されないので、それは適切に折り返されません。 適切なラッピング）。 CSSハイフネーションまたはJavaSciptベースのハイフネーションを使用する必要があります。設定word-wrap:break-wordと同様にword-break: break-allは、適切なラッピングの代わりにの単語（分割すると任意の個数に分割します）の意味でになります。

Answer 3

すべてのブラウザでCSSラップアラートが機能しないため、代わりにJavaScriptを使用してください。それは同じ結果をもたらすはずです。

以下の関数はJQueryを必要とし、ウィンドウのサイズを変更するたびに実行されます。

この関数は、要素の幅が親要素よりも大きいかどうかを調べ、要素がある場合は、単語の代わりにすべてを破棄します。私たちは子供たちが親よりも大きく成長するのを望んでいませんよね？

私はテーブルのためにそれを必要としていましたので、他の要素にしたい場合は、 "table"を "#yourId"または ".yourClass"に変更してください。 parent-divがあるか確認してください。あるいは、 "body"や何かに "div"を変更してください。

それは他に行く場合、それはとても多くのコードがある理由です、それが戻って変更すべきかどうかを確認し、その後ワードブレークに変更し、..： '/

$(window).on('resize',function() { 
    $('table').each(function(){ 
     if($(this).width() > $(this).parent('div').width()){ 
      $(this).css('word-break', 'break-all'); 
     } 
     else{ 
      $(this).css('word-break', 'break-word'); 
      if($(this).width() > $(this).parent('div').width()){ 
       $(this).css('word-break', 'break-all'); 
      } 
     } 
    }); 
}).trigger('resize'); 

私はそれがために働く願っています君は！

Answer 4

word-wrap: break-allが動作しない場合は、この追加も試してみてください。これは、1行のテキストをラップするために有用であるブートストラップ3に

Answer 5

を.btnクラスと私のための

white-space:normal; 

が作業を：

#fos { 
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; 
    width: 100%; 
}