【CSS】自動で文字を折り返すには？改行するための2つのプロパティを紹介
2024-04-02
HTMLとCSSで改行する方法（brタグを使わずに）
メリット
- コードが簡潔になる
- デザインの自由度が高まる
- 特定の条件下でのみ改行を適用できる
方法
主に以下の3つの方法があります。
white-spaceプロパティ
normal: 通常の改行処理pre: 空白文字と改行文字をそのまま表示pre-wrap: 長い単語が折り返されるnowrap: 改行されない
p {
white-space: pre-wrap;
}
word-wrapプロパティ
normal: 単語の途中で改行しないbreak-word: 単語の途中で改行する
p {
word-wrap: break-word;
}
normal: ボックスからはみ出した文字を省略break-word: ボックスからはみ出した文字を単語の途中で改行
p {
overflow-wrap: break-word;
}
注意点
- ブラウザによっては対応していないプロパティもある
- 意図しない改行が発生する可能性がある
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>改行サンプル</title>
<style>
p {
font-size: 16px;
line-height: 1.5;
margin: 10px;
}
/* white-space */
.pre-wrap {
white-space: pre-wrap;
}
/* word-wrap */
.break-word {
word-wrap: break-word;
}
/* overflow-wrap */
.overflow-wrap {
overflow-wrap: break-word;
}
</style>
</head>
<body>
<p>これは長い文章です。長い長い文章です。長い長い長い文章です。長い長い長い長い文章です。長い長い長い長い長い文章です。長い長い長い長い長い長い文章です。</p>
<p class="pre-wrap">これは長い文章です。長い長い文章です。長い長い長い文章です。長い長い長い長い文章です。長い長い長い長い長い文章です。長い長い長い長い長い長い文章です。</p>
<p class="break-word">これは長い文章です。長い長い文章です。長い長い長い文章です。長い長い長い長い文章です。長い長い長い長い長い文章です。長い長い長い長い長い長い文章です。</p>
<p class="overflow-wrap">これは長い文章です。長い長い文章です。長い長い長い文章です。長い長い長い長い文章です。長い長い長い長い長い文章です。長い長い長い長い長い長い文章です。</p>
</body>
</html>
上記コードをブラウザで開くと、それぞれのプロパティによる改行の違いを確認できます。
補足
- 上記コードはあくまで例です。必要に応じて調整してください。
- その他にも、
text-alignプロパティやfloatプロパティを使って改行を制御する方法もあります。
その他の改行方法
flexboxレイアウトを使うと、要素を柔軟に配置することができます。
<div class="container">
<p>長い文章です。長い長い文章です。長い長い長い文章です。長い長い長い長い文章です。長い長い長い長い長い文章です。長い長い長い長い長い長い文章です。</p>
</div>
.container {
display: flex;
flex-wrap: wrap;
}
p {
flex: 1 1 auto;
margin: 10px;
}
上記のコードでは、flex-wrapプロパティをwrapに設定することで、要素が折り返されるようにしています。
<div class="container">
<p>長い文章です。長い長い文章です。長い長い長い文章です。長い長い長い長い文章です。長い長い長い長い長い文章です。長い長い長い長い長い長い文章です。</p>
</div>
.container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
grid-gap: 10px;
}
p {
margin: 0;
}
上記のコードでは、grid-template-columnsプロパティを使って、要素が折り返されるようにしています。
media query
メディアクエリを使うと、画面サイズに応じて改行を設定することができます。
<p>長い文章です。長い長い文章です。長い長い長い文章です。長い長い長い長い文章です。長い長い長い長い長い文章です。長い長い長い長い長い長い文章です。</p>
@media (max-width: 768px) {
p {
white-space: pre-wrap;
}
}
html css line-breaks
