1

私の<p>タグにはいくつかのテキストがあり、それは多くの行で壊れています。

<p>
some really long text broken in many places...
</p>

通常の動作では、改行でスペース文字を表示することはありませんが、私のアプリケーションではそれを表示する必要がありますが、それはどのような方法でも可能ですか？

編集：

これを実行した場合：

<p style="width:100px;">
    <span style="background-color: #008000">
        some long text bla bla bla bla bla bla bla
    </span>
</p>

ご覧のとおり、単語間のスペース（ "＆＃32"）は他の文字と同じように見えますが、各行の終わりにはスペースがありません。

4

5 に答える 5

3

あなたの答えは csswhite-spaceプロパティにあります。これは HTML である必要があります。

<p style="width:100px;">
  <span style="background:#008000;">some long text bla bla bla bla bla bla bla</span>
</p>

CSS は次のようになります。

span {
  white-space: pre-wrap;
}

white-space:pre-wrap;ただし、HTML フォーマットで使用できるすべてのタブも含まれているという問題があります。<span>したがって、タグ内のテキストをインデントすることはできません。

私が作成したこのフィドルを見てください: jsfiddle.net/jWbgW/

もちろん、実際にはすべてのスタイル定義を css に入れる必要がありますが、それは当然のことです。

于 2013-01-25T13:10:13.017 に答える
1

スペース文字は、実際には行末に表示されません。要素に設定white-space: preするとspan、そのコンテンツがそのまま表示され、行への分割と、複数または行末のスペースが保持されます。行末に個々のスペースを表示するには (スペースを占有し、背景色を取得するという意味で)、 として表現できる改行なしスペースを使用できます&nsbsp;。

しかし、通常どおりテキストを折り返す場合は、残念ながらブラウザにそのような「可視スペース」を行末に追加させる簡単な方法はありません。

于 2013-01-25T13:45:00.723 に答える
0 
p { white-space:nowrap;}

<p>This text will be not broken on many lines...</p>

こちらもチェックしてください: http://www.impressivewebs.com/css-white-space/

于 2013-01-25T12:53:06.240 に答える