pre标签内实现内容换行CSS处理方法

六月初六月初 CSS 2019-10-23 09:29:51

<pre> 标签的一个常见应用就是用来表示计算机的源代码，在实际应用中我们会发现位于pre中的内容不会自动换行，那么关于该效果我们要如何处理？

设置前效果：


设置后：


关键css代码：

pre{
 white-space: pre-wrap;       /* css-3 */
 white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
 white-space: -pre-wrap;      /* Opera 4-6 */
 white-space: -o-pre-wrap;    /* Opera 7 */
}

效果图完整代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>		
		<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
	</head>
	<body>
		<style>
		pre{
			 white-space: pre-wrap;       /* css-3 */
			 white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
			 white-space: -pre-wrap;      /* Opera 4-6 */
			 white-space: -o-pre-wrap;    /* Opera 7 */
		}
		</style>
		<pre >六月初博客站，是一个记录自己生活点滴、互联网技术的原创独立博客。</pre>
	</body>
</html>

white-space属性值pre-wrap：

保留空白符序列，但是正常地进行换行。

六月初字帖坊小程序 你想要的字帖模板及工具，这里都有！