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

インターネットの説明に欠けているもの?

 株式会社日本レジストリサービス(以下JPRS、本社:東京都千代田区、代表取締役社長 東田幸樹)は、インターネット教育の支援活動の一環として、全国の中学校・高校・高等専門学校を対象に、マンガ小冊子『ポ …

Web Components

Web Components でスタイルシートを再利用する

Constructable Stylesheet Objects の使い方を説明します。

Web

bfcache を体験するページを作りました

bfcache を体験するページを作りましたので紹介します。

Web

Screen Wake Lock API を使って、ディスプレイをスリープさせないWebページを作る

Screen Wake Lock API を使ったサンプルページを作りました。

Google

Google マップ (Google Maps) で緯度経度を指定して場所を見つける方法

例えば「北緯35度40分57秒 東経139度45分10秒」という情報があった場合に、それがどこなのか調べるには Google マップ を利用することができます。では、どうやればよいのでしょうか? 実は …