From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/zh-cn/web/css/white-space/index.html | 158 +++++++++++++++++++++++++++++ 1 file changed, 158 insertions(+) create mode 100644 files/zh-cn/web/css/white-space/index.html (limited to 'files/zh-cn/web/css/white-space/index.html') diff --git a/files/zh-cn/web/css/white-space/index.html b/files/zh-cn/web/css/white-space/index.html new file mode 100644 index 0000000000..f85206785c --- /dev/null +++ b/files/zh-cn/web/css/white-space/index.html @@ -0,0 +1,158 @@ +--- +title: white-space +slug: Web/CSS/white-space +translation_of: Web/CSS/white-space +--- +
{{CSSRef}}
+ +

white-space CSS 属性是用来设置如何处理元素中的 {{Glossary("whitespace", "空白")}}。

+ +

{{EmbedInteractiveExample("pages/css/white-space.html")}}

+ +

语法

+ +
/* Keyword values */
+white-space: normal;
+white-space: nowrap;
+white-space: pre;
+white-space: pre-wrap;
+white-space: pre-line;
+
+/* https://github.com/w3c/csswg-drafts/pull/2841 */
+white-space: break-spaces;
+
+/* Global values */
+white-space: inherit;
+white-space: initial;
+white-space: unset;
+
+ +

white-space属性被指定为从下面的值列表中选择的单个关键字。

+ +

值

+ +
+
normal
+
连续的空白符会被合并，换行符会被当作空白符来处理。换行在填充「行框盒子(line boxes)」时是必要。
+
nowrap
+
和 normal 一样，连续的空白符会被合并。但文本内的换行无效。
+
pre
+
连续的空白符会被保留。在遇到换行符或者{{HTMLElement("br")}}元素时才会换行。 
+
pre-wrap
+
连续的空白符会被保留。在遇到换行符或者{{HTMLElement("br")}}元素，或者需要为了填充「行框盒子(line boxes)」时才会换行。
+
pre-line
+
连续的空白符会被合并。在遇到换行符或者{{HTMLElement("br")}}元素，或者需要为了填充「行框盒子(line boxes)」时会换行。
+
+ +

break-spaces
+ 与 pre-wrap的行为相同，除了：

+ + + +

下面的表格总结了各种 white-space 值的行为：

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
换行符空格和制表符文字换行行尾空格
normal合并合并换行删除
nowrap合并合并不换行删除
pre保留保留不换行保留
pre-wrap保留保留换行挂起
pre-line保留合并换行删除
break-spaces保留保留换行换行
+ +

示例

+ +

基础示例

+ +
code {
+  white-space: pre;
+}
+ +

下面的代码允许在 {{HTMLElement("pre")}} 中换行

+ +
pre {
+  word-wrap: break-word;      /* IE 5.5-7 */
+  white-space: pre-wrap;      /* current browsers */
+}
+
+ +

规范

+ + + + + + + + + + + + + + + + + + + + + +
规范状态注释
{{SpecName('CSS3 Text', '#propdef-white-space', 'white-space')}}{{Spec2('CSS3 Text')}}Precises the breaking algorithms.
{{SpecName('CSS2.1', 'text.html#white-space-prop', 'white-space')}}{{Spec2('CSS2.1')}}Initial specification.
+ +

{{CSSInfo}}

+ +

浏览器兼容性

+ +

{{Compat("css.properties.white-space")}}

-- cgit v1.2.3-54-g00ecf