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

2022年6月27日

環境
Google Chrome　103.0.5060.53（Official Build）

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

word-break は CSS のプロパティで、改行しなければテキストがコンテンツボックスからあふれる場合に、ブラウザーが改行を挿入するかどうかを指定します。

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

使用例

<!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

関連記事: