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

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

関連記事

Glitch

Glitch プロジェクトの .git ディレクトリ・サイズを小さくしました

Glitch プロジェクトの .git ディレクトリ・サイズを小さくしました。そのときの作業内容を紹介します。

DokuWiki

DokuWiki のプラグイン開発に関する情報

DokuWiki をなるべくスマートにカスタマイズしようとすると(設定変更以上のことをやりたい場合です)、テンプレートかプラグインを自作せざるを得ません。他の方法があまり用意されていないためです。 テ …

DokuWiki

DokuWiki Wrapプラグインの使い方

DokuWiki を使う上で、外せない Wrapプラグイン の使い方について書きます。 目次1. DokuWiki の Wrapプラグインとは?2. 基本的な使い方<div> タグと&lt …

Web

Uptime Robot を使ってウェブサイトの死活監視を行う

Uptime Robot というウェブサイトの死活監視サービスの使い方を説明します。

CSS

CSSの display: contents について

CSSの display: contents についてのデモページを作りました。