はじめに
CSSには、テキストの改行方法を制御するための white-space プロパティがあります。このプロパティの値にはいくつかのオプションがあり、その中でも pre-line と pre-wrap は混同しやすいなぁと個人的に感じたため、この記事では、これらの違いをサンプルコードを使って分かりやすく解説したいと思います。
white-space プロパティの基本
まず、white-space プロパティは、要素内のテキストの改行や空白の扱いを指定します。以下に、代表的な値とその動作を示します：
- normal: 空白や改行文字を無視し、テキストは通常通りに折り返されます。
- pre: テキストは折り返されず、空白や改行文字がそのまま表示されます。
- nowrap: テキストは折り返されません。
- pre-wrap: 空白や改行文字を保持しつつ、テキストが必要に応じて折り返されます。
- pre-line: 連続する空白文字を一つにまとめ、改行文字は保持しますが、必要に応じてテキストが折り返されます。
pre-line の説明とサンプルコード
説明
pre-line は、テキスト内の改行文字（\n）を保持しますが、連続する空白文字（スペース）は一つにまとめます。また、必要に応じてテキストが折り返されます。
サンプルコード
pre-line.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>pre-lineサンプル</title>
<style>
.pre-line {
white-space: pre-line;
border: 1px solid #000;
padding: 10px;
width: 200px;
}
</style>
</head>
<body>
<div class="pre-line">
This is a sample text.
It includes multiple spaces
and some line breaks.
</div>
</body>
</html>
結果
上記のコードをブラウザで表示すると、次のようになりました。
pre-line を使用すると、テキスト内の改行はそのまま表示されますが、連続する空白は一つにまとめられます。
pre-wrap の説明とサンプルコード
説明
pre-wrap は、空白文字や改行文字をそのまま保持します。また、必要に応じてテキストが折り返されます。
サンプルコード
pre-wrap.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>pre-wrapサンプル</title>
<style>
.pre-wrap {
white-space: pre-wrap;
border: 1px solid #000;
padding: 10px;
width: 200px;
}
</style>
</head>
<body>
<div class="pre-wrap">
This is a sample text.
It includes multiple spaces
and some line breaks.
</div>
</body>
</html>
結果
上記のコードをブラウザで表示すると、次のようになりました。
pre-wrap を使用すると、テキスト内の空白と改行がそのまま保持されます。
まとめ
簡単にまとめると、pre-line と pre-wrap の違いは以下の通りです。
- pre-line: 改行文字は保持するが、連続する空白は一つにまとめる。必要に応じて折り返される。
- pre-wrap: 空白文字も改行文字もそのまま保持する。必要に応じて折り返される。
これらの違いを理解することで、テキストの表示方法をより細かく制御することができます。