8.1 プロパティ text-overflow
テキストの折り返しやその表示の管理は、特に長いテキスト行やサイズが制限されたコンテナと作業するときに、Webデザインの重要な側面だよ。text-overflow、white-space、word-wrap（今はoverflow-wrapとして知られている）ってプロパティが、テキストがどう表示されるかをコントロールできるのさ。
text-overflowプロパティは、コンテナの境界を超えるテキストの表示方法を制御するんだ。white-spaceやoverflowプロパティと組み合わせて、テキストをトリミングして省略記号を追加する効果を出すことができるよ。
値:
clip: コンテナの境界を超えるテキストをトリミングellipsis: トリミングされたテキストの最後に省略記号（...）を追加
使用例:
CSS
.container {
width: 200px;
white-space: nowrap;
overflow: hidden;
border: 1px solid #000;
}
.clip {
text-overflow: clip;
}
.ellipsis {
text-overflow: ellipsis;
}
HTML
<body>
<div class="container clip">このテキストはコンテナの境界でトリミングされるよ。</div>
<div class="container ellipsis">このテキストはトリミングされ、省略記号で置き換えられるよ。</div>
</body>
8.2 プロパティ white-space
white-spaceプロパティは、空白文字の処理とテキストの折り返しを管理するんだ。空白やタブ、改行がテキストでどう処理されるかを指定できるよ。
値:
normal: 空白や改行が通常通り処理される（デフォルト）nowrap: テキストは改行されずに1行で表示されるpre: 空白や改行がHTMLの<pre>タグのように保存されるpre-wrap: 空白や改行が保存されるが、必要に応じて改行されることもあるpre-line: 改行は保存されるが、空白は通常通り処理されるbreak-spaces: 空白や改行が保存され、長い空白が改行を引き起こすことがある
使用例:
CSS
.normal {
white-space: normal;
}
.nowrap {
white-space: nowrap;
}
.pre {
white-space: pre;
}
.pre-wrap {
white-space: pre-wrap;
}
HTML
<body>
<div class="normal">このテキストはスペースが足りなければ次の行に移動するよ。</div>
<div class="nowrap">このテキストは次の行に移動せず、1行で表示されるよ。</div>
<div class="pre">
このテキストは すべての
空白と改行を保存するよ。
</div>
<div class="pre-wrap">
このテキストはスペースが
足りなければ次の行に移動
するけど、すべての空白と改行を保存するよ。
</div>
</body>
8.3 プロパティ overflow-wrap
overflow-wrap（以前はword-wrapとして知られていた）プロパティは、コンテナの境界を超える単語の折り返しを管理するんだ。分割できない長い単語によるコンテナのオーバーフローを防ぐことができるよ。
値
normal: 標準的なルールに従って単語の折り返しが行われるbreak-word: 単語を切ってでも折り返しが行われる
使用例:
CSS
.container {
width: 200px;
border: 1px solid #000;
}
.normal {
overflow-wrap: normal;
}
.break-word {
overflow-wrap: break-word;
}
HTML
<body>
<div class="container normal">このテキストはスペースが足りなければ次の行に移動するよ。</div>
<div class="container break-word">この長い単語はスペースが足りなければ次の行に移動するよ。</div>
</body>
コードの説明:
overflow-wrap: normal;: 標準的なルールに従って折り返し、単語を切らないoverflow-wrap: break-word;: 長い単語を切ってでも次の行に移行する
8.4 プロパティの併用
text-overflow、white-space、word-wrapプロパティは、サイズが制限されたコンテナで希望するテキスト表示効果を達成するためによく併用されるんだ。
使用例:
CSS
.container {
width: 200px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
overflow-wrap: break-word;
border: 1px solid #000;
}
HTML
<body>
<div class="container">このテキストはコンテナに収まらない場合、省略記号で置き換えられるよ。</div>
</body>
コードの説明:
white-space: nowrap;: テキストを1行で表示、折り返しなしoverflow: hidden;: コンテナの境界を超えるテキストを非表示にするtext-overflow: ellipsis;: トリミングされたテキストの最後に省略記号を追加overflow-wrap: break-word;: 長い単語を折り返し、必要に応じて切る
GO TO FULL VERSION