pre要素で折り返し改行させる方法
pre要素は通常だと右端で改行されません。改行させるようにするには、white-spaceプロパティにpre-wrapを指定します。
サンプルコード
pre要素はデフォルトでwhite-space: pre
のスタイルが付きます。これは、端での折り返しに対応していません。pre-wrapに変更してあげましょう。
pre {
white-space: pre-wrap ;
}
デモ
pre-wrapの場合
pre要素の折り返し改行を有効にするには、white-spaceプロパティにpre-wrap
を指定します。
<!-- このコードは編集できます。 -->
<!DOCTYPE html>
<html>
<head>
<style>
pre {
width: 50% ;
border: 1px solid #000 ;
white-space: pre-wrap ;
}
</style>
</head>
<body>
<p>折り返しに対応しています。</p>
<pre>SYNCER SYNCER SYNCER SYNCER SYNCER SYNCER SYNCER SYNCER SYNCER SYNCER SYNCER SYNCER
</pre>
</body>
</html>
preの場合 (デフォルト)
デフォルトでは、折り返しで改行されません。
<!-- このコードは編集できます。 -->
<!DOCTYPE html>
<html>
<head>
<style>
pre {
width: 50% ;
border: 1px solid #000 ;
}
</style>
</head>
<body>
<p>折り返しに対応していません。</p>
<pre>SYNCER SYNCER SYNCER SYNCER SYNCER SYNCER SYNCER SYNCER SYNCER SYNCER SYNCER SYNCER
</pre>
</body>
</html>
関連記事
- br要素みたいに要素する方法
- CSSでbr要素と同じように改行させるには、\Aとwhite-spaceプロパティを利用します。
- dl要素を横並びにする方法
- dl要素を横並びに表示するには、dt要素にfloat: leftを適用し、dd要素の左余白を設けます。
- 三角形を作る方法
- CSSで三角形を作るには、横幅、高さが0の要素に幅の厚い枠線を付けます。
- URLなど半角英数の途中で強制的に折り返す方法
- word-breakプロパティにbreak-allを指定すれば、urlなど半角文字列の途中でも行末で強制的に折り返してくれます。
- 文字の太さを変更する方法
- 文字の太さを変更するには、font-weightプロパティを利用します。
- テキストを上下で中央揃えする方法
- テキストを上下で中央揃えするには、heightとline-heightに同じ高さを指定しましょう。