低価格・高品質・最速のHTMLコーディングはクロノドライブへ

preタグ内のテキストを自動改行させるスタイルシート

preタグで囲ったテキストは自動改行されないため、文章量が多いとコンテンツ領域を越えてしまったり、越えないように overflow: auto などを指定するのですが、利用規約などをpreでマークアップしたときにはちょっと見難いものになってしまいます(縦横のスクロールバーでます!)。

そんなときに使えるのがpreタグで囲ったテキストも自動改行させるスタイルシートです。記述はとても簡単で以下のコードをpreタグに対して指定してあげるだけです。

01pre {
02    /* Mozilla */
03    white-space: -moz-pre-wrap;
04 
05    /* Opera 4-6 */
06    white-space: -pre-wrap;
07 
08    /* Opera 7 */
09    white-space: -o-pre-wrap;
10 
11    /* CSS3 */
12    white-space: pre-wrap;
13 
14    /* IE 5.5+ */
15    word-wrap: break-word;
16}

「フロントエンドエンジニアの教科書」を出版しました!HTML・CSS・JavaScript+α 次世代コーダーのための仕事術

HTMLコーダーからフロントエンドエンジニアにステップするために必要な知識と技術を解説。
現場で求められる人材となるためには、何を知っていて、何ができなければいけないのか。
Web制作の最先端にいるクロノドライブだからこそ教えられるノウハウが満載です。

出版社名:ソフトバンククリエイティブ
著者:クロノドライブ

Amazon.co.jp詳細ページへ