Web

【CSS】kbd 要素には “white-space: nowrap” を指定しましょう

投稿日:2018年7月26日 更新日:

kbd 要素に何も指定しないと、以下のように途中で改行されてしまうことがあります。

before

通常の状態
通常の状態

これを避けるために、kbd 要素に対して “white-space: nowrap” を指定して改行を禁止しておきましょう。

kbd {
  white-space: nowrap;
}
white-space プロパティに nowrap をセットすることで、「空白を折りたたむが、テキスト内の改行を抑制する」ことができます。詳細は「参考」にあげたリンク先をご覧ください。

こうすれば、kbd 要素内で改行されなくなります。

after

white-space: nowrap を指定した場合
white-space: nowrap を指定した場合

参考

📂-Web

執筆者:labo


comment

メールアドレスが公開されることはありません。

関連記事

Web Vitals

LCP を意識した Highlight.js の読み込み方

LCP を意識した Highlight.js の読み込み方について説明します。

Web

CSP と CORS の違い

CSP と CORS の違いをざっと確認するためのページです。

Web

ブラウザをキーボードで操作するための拡張機能 Vimium

ブラウザをキーボードで操作するための拡張機能 Vimium について説明します。

Web Vitals

Google Fonts がフォントファイルを読み込む様子を観察する

Google Fonts がフォントファイルを読み込む様子を観察します。

WordPress

「Build a Custom WordPress User Flow」を試してみました

目次1. はじめにソースコード2. 全体3. Part 1: Replace the Login Page使用している関数アクションフィルタ4. Part 2: New User Registrati …