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

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

Google

Google マップの地図をウェブページに埋め込む手順

Google マップの地図を、ウェブページに埋め込む手順について説明します。 手順自体は簡単なのですが、Google マップの仕様が時々変わり、操作手順もその影響を受けることがあるため、現時点(201 …

プライバシー

ウェブブラウザのサードパーティ・クッキーを無効にする方法

目次1. サードパーティ・クッキーとは?2. サードパーティ・クッキーを無効にする手順Chrome の場合Firefox の場合Microsoft Edge の場合Internet Explorer …

Web

rel=”preload” によってリソースを先読みさせる

目次1. rel=”preload” について読み込みは非同期に実行され、レンダリングをブロックしない通常の読み込み処理の記述が別に必要2. デモページ3. その他の特徴as …

Chrome

Chrome で拡張機能を使わずにスクリーンショットを撮る方法

Chrome で拡張機能を使わずにスクリーンショットを撮る方法について説明します。

Web Vitals

highlight.js が引き起こすレイアウト・シフトを防止する

highlight.js が引き起こすレイアウト・シフトを防止する方法を紹介します。