コード要素内の改行を防ぐ:短いコードスニペットに nowrap を追加する方法

Preventing line breaks in <code> elements

ウェブサイトのタイポグラフィの細部にこだわる著者が、<code> 要素内の不自然な改行を防ぐ方法を紹介。正規表現で短いコードスニペットを検出し、改行可能な文字(ハイフンやスペース)を含む場合に nowrap クラスを追加します。CSS の text-wrap: nowrap プロパティと組み合わせることで、コードの可読性を向上させます。コピー&ペースト時の意味変化を避けるため、非改行ハイフンではなくクラスを使用する点がポイントです。

ハイフンを含む単語を複数行に分割するのは通常問題ありませんが、コードでそれが発生すると厄介です。

この日のほかの記事

2026-07-24