CSS break-wordで単語の途中で改行するサンプル
環境
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>
<!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>
<!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」横にはみ出さないように改行されます。