社員ブログ
HOME  社員ブログ
ホーム > CSS, HTML, 社員:cobra > HTML cssを使ってpreタグ内で自動改行させる方法。

HTML cssを使ってpreタグ内で自動改行させる方法。

2014年07月7日 9時45分15秒

こんにちは、コブラです。

 

タイトルの通りですが、

preタグ内のテキストは改行されない為、

文章が多いと横にながーく伸びてしまいます。

そこで、以下のブログ様を参考に解決しました。

 

preタグ内のテキストを自動改行させるスタイルシート – クロノドライブ様

 

pre {
  /* Mozilla */
  white-space: -moz-pre-wrap;
  /* Opera 4-6 */
  white-space: -pre-wrap;
  /* Opera 7 */
  white-space: -o-pre-wrap;
  /* CSS3 */
  white-space: pre-wrap;
  /* IE 5.5+ */
  word-wrap: break-word;
}

 

 Chromeでも有効でした!

 

ちなみに、preタグ内はフォントもブラウザに依存して小さくなってしまうことも。

そんなときは上のクラスタ内にfont-size: Npxを追加すればOKです!

CSS, HTML, 社員:cobra

  1. コメントはまだありません