技术文摘
CSS white-space属性用法手册
2025-01-01 21:41:11 小编
CSS white-space属性用法手册
在CSS中，white-space属性是一个强大的工具，用于控制元素内的空白字符（如空格、制表符和换行符）的处理方式。了解和掌握这个属性的用法，能够帮助我们更好地控制文本的布局和显示效果。
基本语法
white-space属性的基本语法如下：
selector {
white-space: value;
}
其中，value可以取以下几个值：
normal
这是默认值。浏览器会忽略多余的空白字符，只保留一个空格，并自动换行。例如：
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.normal {
white-space: normal;
}
</style>
</head>
<body>
<p class="normal">这是 一段 有多余空格的文本</p>
</body>
</html>
显示时多余空格会被合并成一个。
nowrap
文本不会自动换行，除非遇到<br>标签或文本超出了元素的宽度。例如：
.nowrap {
white-space: nowrap;
}
pre
空白字符会被保留，文本只会在遇到换行符时才会换行，类似于<pre>标签的效果。
.pre {
white-space: pre;
}
pre-wrap
空白字符会被保留，并且文本会在必要时自动换行。
.pre-wrap {
white-space: pre-wrap;
}
pre-line
空白字符会被合并，但文本会在必要时自动换行，保留换行符的效果。
.pre-line {
white-space: pre-line;
}
应用场景
- 在代码展示页面，使用
white-space: pre可以保留代码中的缩进和换行格式。 - 当需要控制文本不换行时，
white-space: nowrap就很有用，比如制作导航栏等。
通过合理运用CSS的white-space属性，我们可以更灵活地控制文本的显示和布局，满足不同的设计需求。
TAGS: CSS CSS属性 white-space属性 用法手册