CSS中的text-wrap属性详解

一、属性描述
text-wrap是CSS中用于控制文本换行行为的属性，它决定了文本在容器内如何自动换行以适应容器宽度。这个属性特别适用于处理长单词、URL等不间断内容的排版问题。

二、属性值详解

1. wrap（默认值）

   • 行为：允许文本在任意断点处换行，包括单词内部
   • 应用场景：普通文本内容，确保文本完全包含在容器内
   • 示例：text-wrap: wrap;

2. nowrap

   • 行为：禁止文本换行，所有文本显示在同一行
   • 注意：会与white-space: nowrap产生相同效果
   • 示例：text-wrap: nowrap;

3. balance

   • 行为：尽可能平衡多行文本的行长度，使各行宽度相近
   • 适用条件：仅适用于2-4行文本
   • 效果：提升排版美观度，特别适合标题
   • 示例：text-wrap: balance;

4. pretty

   • 行为：在平衡行长的基础上，避免在最后一行出现孤立的单词（孤儿词）
   • 特点：比balance更注重排版细节质量
   • 限制：可能影响性能，适用于少量文本
   • 示例：text-wrap: pretty;

三、实际应用步骤

1. 基础用法

.container {
  text-wrap: wrap; /* 允许单词内换行 */
}

.title {
  text-wrap: balance; /* 标题文本行长度平衡 */
}

2. 结合其他属性

.text-block {
  text-wrap: pretty;
  hyphens: auto; /* 启用连字符 */
  text-align: justify; /* 两端对齐 */
}

3. 响应式设计中的应用

@media (max-width: 768px) {
  .content {
    text-wrap: pretty; /* 小屏幕下使用更优的换行方式 */
  }
}

四、浏览器兼容性说明

• wrap/nowrap：广泛支持
• balance/pretty：较新属性，需要现代浏览器支持
• 建议使用特性检测：

.title {
  text-wrap: balance;
  text-wrap: pretty; /* 后备值 */
}

五、注意事项

1. balance和pretty对性能有影响，避免在大量文本中使用
2. 中文排版中效果不如英文明显，因为中文天然可按字换行
3. 结合overflow-wrap: break-word可获得更好的兼容性效果