SYNCERのロゴ
アイキャッチ画像

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>
  • Twitterでシェア
  • Facebookでシェア
  • Google+でシェア
  • はてなブックマークでシェア
  • pocketに保存
  • LINEでシェア
更新履歴
2017年6月22日 (木)
コンテンツを公開しました。