CSS break-wordで単語の途中で改行するサンプル

2022年12月7日

環境
Windows 10 Home 64bit
Google Chrome　107.0.5304.122（Official Build）（64 ビット）

構文
overflow-wrap: break-word;
単語が表示領域を超える場合、単語の途中で改行します。

使用例

<!DOCTYPE html>
<html>
<head>
<style>
  .cft {
    overflow-wrap: break-word;
    border: 1px solid #000;
    width: 120px;
    height: 30px;
    background: SkyBlue;
  }
</style>
</head>
<body>

<p class="cft">study skill become</p>

</body>
</html>

結果
文字「become」横にはみ出さないように改行されます。

CSS

Posted by arkgame

Related posts: