text-wrap-mode

**text-wrap-mode** CSS 属性控制元素内部文本是否换行。不同的值提供了在块级元素中换行内容的备选方法。它也可以使用 text-wrap 简写来设置和重置。

**注意：** 此属性的名称是一个占位符，等待 CSSWG 找到一个更好的名称。

试试看

语法

css
/* Keyword values */
text-wrap-style: wrap;
text-wrap-style: nowrap;

/* Global values */
text-wrap-style: inherit;
text-wrap-style: initial;
text-wrap-style: revert;
text-wrap-style: revert-layer;
text-wrap-style: unset;

值

此属性指定行是否可以在非强制性软换行机会处换行。可能的值

wrap

文本在适当的字符处（例如空格，在使用空格分隔符的语言（如英语）中）跨行换行，以最大程度地减少溢出。这是默认值。

nowrap

文本不会跨行换行。它将溢出其包含元素，而不是换行。

正式定义

初始值wrap
应用于文本和块容器
继承是
计算值如指定
动画类型离散的

正式语法

text-wrap-mode = 
  wrap    |
  nowrap

示例

**注意：** 检查此属性的浏览器支持。

包装内容

默认设置是包装内容，因此不需要 text-wrap-mode 属性。在本例中，内容将流到下一行，以便它适合框，最后一行比包含框更长，因此溢出。

HTML

html
<div class="box">CSS IS AWESOME</div>

CSS

css
.box {
  font-family: Arial, sans-serif;
  font-weight: bold;
  font-size: 64px;
  box-sizing: border-box;
  border: 4px solid black;
  padding: 0px 3px;
  width: 223px;
  text-wrap-mode: wrap;
}

结果

不包装内容

在本例中，内容**不会**流到下一行，以便它适合框，因为内容已被明确告知不要使用 text-wrap-mode: nowrap; 换行，内容比包含框更长，因此溢出。

HTML

html
<div class="box">CSS IS AWESOME</div>

CSS

css
.box {
  font-family: Arial, sans-serif;
  font-weight: bold;
  font-size: 64px;
  box-sizing: border-box;
  border: 4px solid black;
  padding: 0px 3px;
  width: 223px;
  text-wrap-mode: nowrap;
}

结果

规范

规范
CSS 文本模块级别 4
# text-wrap-mode

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参见