「CSS入門」 CSS のプロパティword-breakのサンプル

2020年12月1日

説明
word-break: normal;  
既定の改行
word-break:break-all
CJK (中国語、台湾語、日本語、韓国語) 以外のテキストにおいて、単語中などでの文字の改行に関する禁則処理を解除し、
どの文字の間でも改行するようにします。
word-break: keep-all;
CJK テキストの改行を許可しません。 CJK 以外のテキストについては normal と同じ挙動となります。
使用例1

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<table width="450" class="sampleA" style="word-break: keep-all;">
 <td class="sampleB" width="150" style="word-break: keep-all;">
   //some code
</th>
</table>
<table width="450" class="sampleA" style="word-break: keep-all;">  <td class="sampleB" width="150" style="word-break: keep-all;">    //some code </th> </table>
<table width="450" class="sampleA" style="word-break: keep-all;">
  <td class="sampleB" width="150" style="word-break: keep-all;">
    //some code
  </th>
</table>

使用例2

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<div id="cft" style="word-break: keep-all;">
//some code
</div>
<div id="cft" style="word-break: keep-all;"> //some code </div>
<div id="cft" style="word-break: keep-all;">
//some code
</div>

 

CSS

Posted by arkgame