CSS を使用してリスト項目のハイパーリンクの改行を防ぐ方法

CSS を使用してリスト項目の改行を防止する

li タグを使用してリスト項目にハイパーリンクを追加する場合、単語間の空白によりリンクが複数行に折り返す。 CSS は、この問題に対処するソリューションを提供します。

解決策 1: White-Space プロパティ

white-space プロパティを使用すると、要素内での空白の処理方法を制御できます。 。 li タグに white-space: nowrap; を設定すると、リンクが折り返されるのを防ぐことができます:

li {
  white-space: nowrap;
}

解決策 2: リスト項目の幅を増やす

すべての空白を削除したくない場合は、li タグの幅を増やすことができます。これにより、リンクが 1 行に収まるスペースが広がります。

li {
  width: 200px;
}

どちらのソリューションも、リストの読みやすさを維持しながら、リンクの折り返しを効果的に防ぎます。

以上がCSS を使用してリスト項目のハイパーリンクの改行を防ぐ方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。