ICTリテラシーと Web技術の情報サイト

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

投稿日：2018年7月26日更新日：2021年2月1日

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

before

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

kbd {
  white-space: nowrap;
}

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

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

after

参考

📂-Web

執筆者：labo

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

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

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

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

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

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

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

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

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

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