27

スパン内の空白の背景色を設定しようとしています。ただし、行が折り返された時点で空白のスパンがたまたまある場合は表示されません。

HTML

asdfghjklkqowbvaa<span> </span>a

CSS

body {
  font-family: monospace;
  font-size: 40px;
}

span {
  background-color: black;
}

JSFIDDLE

4

2 に答える 2

60

<pre>タグと同じように、空白を表示するようにスパンの CSS を変更します。さまざまな空白オプションを見てみましょう

span {
    background-color: black;
    white-space:pre;
}

上記のリソースから、さまざまなオプションが何をするかについての素晴らしい表を次に示しますwhite-space。

               New lines    Spaces and tabs   Text wrapping
normal         Collapse     Collapse          Wrap
pre            Preserve     Preserve          No wrap
nowrap         Collapse     Collapse          No wrap
pre-wrap       Preserve     Preserve          Wrap
pre-line       Preserve     Collapse          Wrap

スパンにa を追加する&nbsp;と、スペースで文字列が切れることはなくなりますが、代わりにスペースで文字列をラップせずに 2 つの部分を「接着」します。

于 2013-11-02T14:32:54.480 に答える
1

何らかの理由で CSS に依存したくない場合の別のオプションは、非改行スペースを使用することです: &nbsp;、&#160;または&nbsp;

（詳しくはこちらをご覧ください）

于 2020-06-10T21:34:38.373 に答える