📌  相关文章
📜  HTML | DOM 样式 whiteSpace 属性(1)

📅  最后修改于: 2023-12-03 15:15:36.858000             🧑  作者: Mango

HTML | DOM 样式 whiteSpace 属性

介绍

whiteSpace 是 HTML | DOM 中的一种样式属性，用于指定元素内文本的处理方式。

默认情况下，HTML 元素内的文本在显示时会自动换行。而 whiteSpace 属性用于控制是否保留文本中的空白符（如空格、制表符等），以及如何处理换行符等。相关取值包括：

  • normal：默认值，自动换行，连续的空白符会被合并为单个空格。
  • nowrap：文本不自动换行，连续的空白符不会合并。
  • pre：会保留所有空白符，包括连续的空格和制表符，但是不会自动换行。需要手动添加 <br> 标签才能进行换行。
  • pre-wrap：会保留所有空白符，包括连续的空格和制表符，同时自动进行换行。
  • pre-line：会保留所有空白符，包括连续的空格和制表符，但是只有在换行符出现时才进行换行。
示例
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>whiteSpace 属性示例</title>
	<style type="text/css">
		pre {
			background-color: lightblue;
			font-family: monospace;
			border: 1px solid black;
			padding: 1em;
			margin: 1em;
			white-space: pre-wrap;
		}
	</style>
</head>
<body>
	<h1>whiteSpace 属性示例</h1>
	<pre>
		这是一些    空格      和制表符    。
		这是一些<br>手<br>动<br>换<br>行
		这是一些连续的
		空格 和     制表符
		换行符会自动进行换行
	</pre>
</body>
</html>

如上代码中的 <pre> 标签，使用 white-space: pre-wrap; 样式后，将保留所有空白符并自动换行，效果如下图所示：