Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update CSS property overflow-wrap #13198

Merged
merged 10 commits into from
May 11, 2023
23 changes: 15 additions & 8 deletions files/zh-cn/web/css/overflow-wrap/index.md
Original file line number Diff line number Diff line change
@@ -1,29 +1,33 @@
---
title: overflow-wrap
slug: Web/CSS/overflow-wrap
original_slug: Web/CSS/word-wrap
page-type: css-property
browser-compat: css.properties.overflow-wrap
SolidBlock-cn marked this conversation as resolved.
Show resolved Hide resolved
---

{{CSSRef}}

{{EmbedInteractiveExample("pages/css/overflow-wrap.html")}}

[CSS](/zh-CN/docs/Web/CSS) 属性 **`overflow-wrap`** 是用来说明当一个不能被分开的字符串太长而不能填充其包裹盒时,为防止其溢出,浏览器是否允许这样的单词中断换行
[CSS](/zh-CN/docs/Web/CSS) 属性 **`overflow-wrap`** 应用于内联的元素,用来设置当一个不能被分开的字符串太长而不能填充其包裹盒时,为防止其溢出,浏览器是否允许这样的单词在中间换行(break)
SolidBlock-cn marked this conversation as resolved.
Show resolved Hide resolved

> **备注:** 与{{cssxref("word-break")}}相比,`overflow-wrap`仅在无法将整个单词放在自己的行而不会溢出的情况下才会产生中断
> **备注:** 与{{cssxref("word-break")}}相比,`overflow-wrap`仅在无法将整个单词放在自己的行而不会溢出的情况下才会产生换行
SolidBlock-cn marked this conversation as resolved.
Show resolved Hide resolved

> **备注:** word-wrap 属性原本属于微软的一个私有属性,在 CSS3 现在的文本规范草案中已经被重名为 {{cssxref("overflow-wrap")}} word-wrap 现在被当作 overflow-wrap 的“别名”。稳定的谷歌 Chrome 和 Opera 浏览器版本支持这种新语法
这个属性原本属于微软扩展的一个非标准、无前缀的属性,叫做 `word-wrap`,后来在大多数浏览器中以相同的名称实现。目前它已被更名为 {{cssxref("overflow-wrap")}} ,`word-wrap` 相当于其别称
SolidBlock-cn marked this conversation as resolved.
Show resolved Hide resolved

## 语法

```
/* Keyword values */
/* 关键词值 */
overflow-wrap: normal;
overflow-wrap: break-word;
overflow-wrap: anywhere;

/* Global values */
/* 全局值 */
overflow-wrap: inherit;
overflow-wrap: initial;
overflow-wrap: revert;
overflow-wrap: revert-layer;
overflow-wrap: unset;
```

Expand All @@ -32,9 +36,11 @@ overflow-wrap: unset;
### 值

- `normal`
- : 行只能在正常的单词断点处中断。(例如两个单词之间的空格)。
- : 行只能在正常的单词断点(例如两个单词之间的空格)处换行。
- `anywhere`
- : 为防止溢出,如果行中没有其他可接受的断点,则不可断的字符串(如长词或URL)可能会在任何时候换行。在断点处不会插入连字符。在计算最小内容内在大小时,会考虑由单词换行引入的软换行机会。
SolidBlock-cn marked this conversation as resolved.
Show resolved Hide resolved
- `break-word`
- : 表示如果行内没有多余的地方容纳该单词到结尾,则那些正常的不能被分割的单词会被强制分割换行
- : 与 anywhere 值相同,如果行中没有其他可接受的断点,则允许在任意点将通常不可断的单词换行,但在计算最小内容内在大小时不考虑断字引入的软换行机会

## 形式语法

Expand Down Expand Up @@ -117,3 +123,4 @@ p {
- {{cssxref("word-break")}}
- {{cssxref("hyphens")}}
- {{cssxref("text-overflow")}}
- [换行和折行文本的指引](/zh-cn/docs/Web/CSS/CSS_Text/Wrapping_Text)
SolidBlock-cn marked this conversation as resolved.
Show resolved Hide resolved