text-wrap

text-wrap CSS 简写属性控制元素内部文本的换行方式。不同的值提供

  • 排版改进，例如跨断开的标题实现更平衡的行长
  • 一种完全关闭文本换行的方法。

注意：可以使用 white-space 简写属性同时声明 white-space-collapse 和 text-wrap 属性。

试一试

组成属性

此属性是以下 CSS 属性的简写

语法

css
/* Keyword values */
text-wrap: wrap;
text-wrap: nowrap;
text-wrap: balance;
text-wrap: pretty;
text-wrap: stable;

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

text-wrap 属性指定为从以下值列表中选择的单个关键字。

值

wrap

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

nowrap

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

balance

文本以最佳方式平衡每行字符数的方式换行，从而提高布局质量和可读性。由于计算字符并跨多行平衡字符在计算上代价高昂，因此此值仅适用于跨越有限行数（Chromium 为 6 行或更少，Firefox 为 10 行或更少）的文本块。

pretty

产生的行为与 wrap 相同，除了用户代理将使用速度较慢的算法，该算法优先考虑良好的布局而不是速度。这适用于正文内容，其中良好的排版优于性能（例如，当应将 孤行 的数量降至最低时）。

stable

产生的行为与 wrap 相同，除了当用户正在编辑内容时，他们正在编辑的行之前的行保持静态，而不是整个文本块重新换行。

描述

文本可以在内容块（例如段落 (<p>) 或标题 (<h1>–<h6>)）中以两种方式跨行流动。这些是用户控制的强制换行，以及浏览器控制的软换行。text-wrap 属性可用于提示浏览器如何控制软换行。

您为 text-wrap 选择的值取决于您预计要设置样式的文本行数、文本是否为 contenteditable 以及您是否需要优先考虑外观或性能。

当设置样式的内容将限于少量行（例如标题、标题和块引用）时，可以添加 text-wrap: balance 以平衡每行字符数，从而提高布局质量和可读性。由于浏览器限制了此属性影响的行数，因此此值对性能的影响可以忽略不计。

对于较长的文本部分，可以使用text-wrap: pretty。请注意，pretty会对性能产生负面影响，因此仅应在布局比速度更重要的情况下，用于较长的文本块。

当用于具有contenteditable属性的内容时，stable值可以改善用户体验。此值可确保在用户编辑文本时，正在编辑区域中的前几行保持稳定。

正式定义

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

正式语法

text-wrap = 
  <'text-wrap-mode'>   ||
  <'text-wrap-style'>  

<text-wrap-mode> = 
  wrap    |
  nowrap  

<text-wrap-style> = 
  auto     |
  balance  |
  stable   |
  pretty

示例

基本文本换行值比较

HTML

html
<h2 class="wrap" contenteditable="true">
  The default behavior; the text in the heading wraps "normally"
</h2>

<h2 class="nowrap" contenteditable="true">
  In this case the text in the heading doesn't wrap, and overflows the container
</h2>

<h2 class="balance" contenteditable="true">
  In this case the text in the heading is nicely balanced across lines
</h2>

CSS

css
.wrap {
  text-wrap: wrap;
}

.nowrap {
  text-wrap: nowrap;
}

.balance {
  text-wrap: balance;
}

h2 {
  font-size: 2rem;
  font-family: sans-serif;
}

结果

示例中的文本是可编辑的。更改文本，添加长单词，以查看不同的行和单词长度如何影响换行。

规范

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

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅