sync with english version for column-span (#12839)

Co-authored-by: yarusome <[email protected]>
mdn · Apr 21, 2023 · 62373a0 · 62373a0
1 parent acef13f
commit 62373a0
Showing 1 changed file with 59 additions and 24 deletions.
diff --git a/files/zh-cn/web/css/column-span/index.md b/files/zh-cn/web/css/column-span/index.md
@@ -3,52 +3,82 @@ title: column-span
 slug: Web/CSS/column-span
 ---
 
-{{ CSSRef("CSS Multi-columns") }}
+{{CSSRef}}
 
-## 概述
+[CSS](/zh-CN/docs/Web/CSS) 属性 **`column-span`** 的值被设置为 `all` 时，可以让一个元素跨越所有的列。
 
-[CSS](/zh-CN/docs/CSS) 属性`column-span` 的值被设置为`all`时，可以让一个元素跨越所有的列。一个跨越多列的元素被称为**spanning element。**
+{{EmbedInteractiveExample("pages/css/column-span.html")}}
 
-{{cssinfo}}
-
-## 语法
-
-```
-Formal syntax: {{csssyntax("column-span")}}
-```
-
-```
+```css
+/* 关键字值 */
 column-span: none;
 column-span: all;
 
+/* 全局值 */
 column-span: inherit;
+column-span: initial;
+column-span: revert;
+column-span: revert-layer;
+column-span: unset;
 ```
 
+一个跨越多列的元素被称为**跨越元素**（spanning element）。
+
+## 语法
+
+`column-span` 属性可以被指定为下面列出的关键字值之一。
+
 ### 取值
 
 - `none`
   - : 元素不跨多个列。
 - `all`
-  - : 元素横跨所有列。元素出现之前，出现在元素之前的正常流中的内容在所有列之间自动平衡。该元素建立一个新的块格式上下文。
+  - : 元素横跨所有列。元素出现之前，出现在元素之前的正常流中的内容在所有列之间自动平衡。该元素建立一个新的区块格式化上下文。
+
+## 形式定义
+
+{{cssinfo}}
+
+## 形式语法
+
+{{csssyntax}}
 
 ## 示例
 
-下例中的 h2 元素横跨 article 元素中的各列
+### 使标题跨越列
 
-### HTML
+在该示例中，标题跨越了文章中的所有列。
 
-```
+#### HTML
+
+```html
 <article>
-  <h2>My Very Special Columns</h2>
-  <p>This is a bunch of text split into three columns
-     using the CSS `columns` property. The text
-     is equally distributed over the columns.</p>
+  <h2>这是一个跨越了所有的列的标题</h2>
+  <p>
+    h2 元素应该跨越所有列。文本的其余内容应该分布在各列中。
+  </p>
+  <p>
+    这是一些使用 CSS `columns`
+    属性分成三列的文本。文本在各列中均匀分布。
+  </p>
+  <p>
+    这是一些使用 CSS `columns`
+    属性分成三列的文本。文本在各列中均匀分布。
+  </p>
+  <p>
+    这是一些使用 CSS `columns`
+    属性分成三列的文本。文本在各列中均匀分布。
+  </p>
+  <p>
+    这是一些使用 CSS `columns`
+    属性分成三列的文本。文本在各列中均匀分布。
+  </p>
 </article>
 ```
 
-### CSS
+#### CSS
 
-```
+```css
 article {
   columns: 3;
 }
@@ -58,9 +88,9 @@ h2 {
 }
 ```
 
-### 结果
+#### 结果
 
-{{EmbedLiveSample('示例', 'auto', 120)}}
+{{EmbedLiveSample('使标题跨越列', 'auto', 260)}}
 
 ## 规范
 
@@ -69,3 +99,8 @@ h2 {
 ## 浏览器兼容性
 
 {{Compat}}
+
+## 参见
+
+- [行级元素](/zh-CN/docs/Web/HTML/Inline_elements)
+- {{domxref("HTMLSpanElement")}}