From 62373a04924d80dfa7b47813512a0743bdf23a91 Mon Sep 17 00:00:00 2001
From: A1lo <yin199909@aliyun.com>
Date: Fri, 21 Apr 2023 08:48:33 +0800
Subject: [PATCH] sync with english version for `column-span` (#12839)

Co-authored-by: yarusome <97945148+yarusome@users.noreply.github.com>
---
 files/zh-cn/web/css/column-span/index.md | 83 +++++++++++++++++-------
 1 file changed, 59 insertions(+), 24 deletions(-)

diff --git a/files/zh-cn/web/css/column-span/index.md b/files/zh-cn/web/css/column-span/index.md
index 35ac6630446ac5..482c262c627440 100644
--- 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")}}