2015年11月21日
【CSS】画面表示の際に改行されない時の対処法
DBからHTMLで画面に表示させるとき、
div要素が邪魔したりでうまく改行されていない・・・
DBでは改行されているのに・・・ということがあったので、メモ。
・CSSのwhite-spaceプロパティを使う!!
white-spaceプロパティは、ソース中の半角スペース・タブ・改行の表示の仕方を指定する際に使用します。
自分の場合は、ソース内で改行されないという問題があったので、
pre-lineを指定してやると改行されるようになりました。
white-spaceに与えられる値は以下。
white-space: normal;
通常と同様、ソース中の連続する半角スペース・タブ・改行を、1つの半角スペースとして表示。
ボックスの大きさが指定されている場合には、その大きさに応じて自動的改行。
white-space: pre;
ソース中の連続する半角スペース・タブ・改行を、そのまま表示。
white-space: nowrap;
ソース中の連続する半角スペース・タブ・改行を、1つの半角スペースとして表示。
ボックスの大きさが指定されている場合にも、自動的改行されない。
white-space: pre-wrap;
[pre]同様に、ソース中の連続する半角スペース・タブ・改行を、そのまま表示。
ただし、要素の端まで行くと自動的に改行。
white-space: pre-line
[normal]と同様ですが、ソース内の改行位置でも改行される。
この記事へのコメント
コメントを書く
この記事へのトラックバックURL
https://fanblogs.jp/tb/4440443
※ブログオーナーが承認したトラックバックのみ表示されます。
この記事へのトラックバック