リスト項目改行防止 CSS 解説
2024-09-17
CSSでリスト項目の改行を防ぐ方法
HTMLのリスト要素（<ul>、<ol>）の項目が長くなり、自動的に改行される場合、CSSを使用して改行を防ぐことができます。
white-space プロパティを使用する
最も一般的な方法は、white-space プロパティを nowrap に設定することです。これにより、テキストは1行に収まるようにされ、改行が防止されます。
ul li {
white-space: nowrap;
}
word-wrap プロパティを使用する
word-wrap プロパティは、単語の途中で改行するかしないかを制御します。break-word に設定すると、単語の途中で改行が可能になり、テキストがコンテナの幅を超えないようにします。
ul li {
word-wrap: break-word;
}
overflow-wrap プロパティは、単語の途中で改行するかしないかを制御する別の方法です。break-word に設定すると、単語の途中で改行が可能になります。
ul li {
overflow-wrap: break-word;
}
width プロパティを使用する
リスト項目の幅を指定し、改行を防止することもできます。
ul li {
width: 100%; /* または任意の幅 */
}
ul li {
max-width: 300px; /* または任意の最大幅 */
}
注意
word-wrap: break-wordやoverflow-wrap: break-wordは、単語の途中で改行されるため、テキストのレイアウトが崩れる可能性があります。white-space: nowrapは、リスト項目のテキストがコンテナの幅を超えた場合に、テキストがクリップされる可能性があります。
white-space: nowrap を使用して改行を防ぐ
<ul>
<li>長いテキストです。改行されません。</li>
<li>もう一つの長いテキストです。こちらも改行されません。</li>
</ul>
ul li {
white-space: nowrap;
}
word-wrap: break-word を使用して単語の途中で改行を許可する
<ul>
<li>長いテキストです。単語の途中で改行されます。</li>
<li>もう一つの長いテキストです。こちらも単語の途中で改行されます。</li>
</ul>
ul li {
word-wrap: break-word;
}
<ul>
<li>長いテキストです。単語の途中で改行されます。</li>
<li>もう一つの長いテキストです。こちらも単語の途中で改行されます。</li>
</ul>
ul li {
overflow-wrap: break-word;
}
width プロパティを使用してリスト項目の幅を指定する
<ul>
<li>長いテキストです。幅が指定されているため改行されません。</li>
<li>もう一つの長いテキストです。こちらも幅が指定されているため改行されません。</li>
</ul>
ul li {
width: 300px; /* または任意の幅 */
}
<ul>
<li>長いテキストです。最大幅が指定されているため改行されません。</li>
<li>もう一つの長いテキストです。こちらも最大幅が指定されているため改行されません。</li>
</ul>
ul li {
max-width: 300px; /* または任意の最大幅 */
}
flexbox を使用してリスト項目を水平方向に配置する
flexbox を使用してリスト項目を水平方向に配置することで、改行を防ぐことができます。
<ul class="flex-container">
<li>長いテキストです。</li>
<li>もう一つの長いテキストです。</li>
</ul>
.flex-container {
display: flex;
flex-wrap: nowrap; /* 改行を防ぐ */
}
grid レイアウトを使用してリスト項目を水平方向に配置する
<ul class="grid-container">
<li>長いテキストです。</li>
<li>もう一つの長いテキストです。</li>
</ul>
.grid-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* 項目の幅を指定 */
grid-auto-flow: column; /* 水平方向に配置 */
}
<table>
<tr>
<td>長いテキストです。</td>
<td>もう一つの長いテキストです。</td>
</tr>
</table>
table要素は、表形式のデータを表現する際に使用されるため、リスト項目のレイアウトを単純に制御する場合に適しています。flexboxやgridレイアウトは、リスト項目のレイアウトを柔軟に制御できるため、複雑なレイアウトを実現する場合に適しています。
html css word-wrap
