「CSS」word-wrapで英文字を単語の途中で改行させる方法

環境
Google Chrome 103.0.5060.53(Official Build)

構文
1.word-wrap:break-word;

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
word-break は CSS のプロパティで、改行しなければテキストがコンテンツボックスからあふれる場合に、ブラウザーが改行を挿入するかどうかを指定します。
word-break は CSS のプロパティで、改行しなければテキストがコンテンツボックスからあふれる場合に、ブラウザーが改行を挿入するかどうかを指定します。
word-break は CSS のプロパティで、改行しなければテキストがコンテンツボックスからあふれる場合に、ブラウザーが改行を挿入するかどうかを指定します。

2.table-layout:fixed
表と列の幅は table 要素と col 要素の幅によって、または最初の行のセルの幅によって設定されます。

使用例

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<!DOCTYPE html>
<html>
<head>
<style>
table{
border-collapse:collapse;
table-layout:fixed;
width:100%;
}
td{
border:1px solid #808080;
word-wrap:break-word;
}
</style>
</head>
<body>
<table>
<colgroup style="width:55%;">
<colgroup style="width:45%;">
<tr>
<td>UVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRST</td>
<td>UVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRST</td>
</tr>
</table>
</body>
</html>
<!DOCTYPE html> <html> <head> <style> table{ border-collapse:collapse; table-layout:fixed; width:100%; } td{ border:1px solid #808080; word-wrap:break-word; } </style> </head> <body> <table> <colgroup style="width:55%;"> <colgroup style="width:45%;"> <tr> <td>UVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRST</td> <td>UVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRST</td> </tr> </table> </body> </html>
<!DOCTYPE html>
<html>
<head>
<style>
table{
  border-collapse:collapse;
  table-layout:fixed;
  width:100%;
}
td{
  border:1px solid #808080;
  word-wrap:break-word;
}
</style>
</head>
<body>

  <table>
    <colgroup style="width:55%;">
    <colgroup style="width:45%;">
    <tr>
        <td>UVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRST</td>
        <td>UVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRST</td>
    </tr>
  </table>
</body>
</html>

結果
画面に英文字を単語の途中で改行します。

CSS

Posted by arkgame