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

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

関連記事

DokuWiki

DokuWiki が最新版なのに upgrade now! が表示される場合の対処法

目次1. DokuWiki が最新版なのに upgrade now! が表示される2. 対処方法その13. 対処方法その24. おわりに参考 1. DokuWiki が最新版なのに upgrade n …

Web

ウェブブラウザが、HTTP/1.1 もしくは HTTP/2 のどちらを使うか判定する仕組み (httpsスキームのみ)

ウェブブラウザが、HTTP/1.1 もしくは HTTP/2 のどちらを使うか判定する仕組み (httpsスキームのみ)について説明します。

DokuWiki

DokuWiki: Layout Switcher Plugin

DokuWiki用プラグイン「Layout Switcher Plugin」のページです。 目次1. 概要2. インストールと設定(1) プラグインファイルのダウンロード(2) プラグインをサーバーに …

Web

JSFiddle を使って HTML/CSS/JavaScript をウェブページに埋め込む

JSFiddle というサービスを使って、ウェブページに HTML/CSS/JavaScript を埋め込んでみましょう。 目次1. JSFiddle とは?2. ウェブページに埋め込む手順(1) ア …

Web

Cookie使用の同意を求めるポップアップを表示する (Cookie Consent by Osano)

Cookie Consent by Osano の使い方について説明します。