CSS中的text-overflow属性详解

描述
text-overflow属性用于控制当文本内容溢出其容器时如何显示溢出部分。它通常与overflow: hidden和white-space: nowrap配合使用，实现单行文本的截断效果。这个属性在需要节省布局空间同时保持界面整洁的场景中非常实用。

属性值详解

1. clip（默认值）：直接裁剪溢出文本，不显示任何提示符号
2. ellipsis：用省略号（...）表示被截断的文本
3. <string>：使用自定义字符串表示截断（目前浏览器支持有限）

基础使用步骤

1. 设置容器约束：首先需要为文本容器设置明确的宽度限制

.container {
  width: 200px;          /* 固定宽度 */
  border: 1px solid #ccc;
}

2. 禁用文本换行：使用white-space属性防止文本自动换行

.container {
  white-space: nowrap;    /* 强制文本在一行显示 */
}

3. 隐藏溢出内容：通过overflow属性隐藏超出容器的部分

.container {
  overflow: hidden;       /* 隐藏溢出内容 */
}

4. 应用截断效果：最后使用text-overflow属性设置截断显示方式

.container {
  text-overflow: ellipsis; /* 用省略号表示截断 */
}

完整示例演示

<style>
  .truncate {
    width: 250px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 8px;
    border: 1px solid #ddd;
  }
</style>

<div class="truncate">
  这是一段非常长的文本内容，当它超过容器宽度时会被截断并显示省略号
</div>

效果：显示为"这是一段非常长的文本内容，当它超过容器宽度时会被..."

多行文本截断技巧
text-overflow本身只支持单行文本，但可以通过组合属性实现多行截断：

.multiline-ellipsis {
  display: -webkit-box;
  -webkit-line-clamp: 3;     /* 限制显示行数 */
  -webkit-box-orient: vertical;
  overflow: hidden;
  height: 4.5em;            /* 根据行高计算高度 */
  line-height: 1.5em;
}

注意事项

1. text-overflow只对block或inline-block容器生效
2. 必须同时设置white-space: nowrap和overflow: hidden
3. 省略号显示在行尾，可能覆盖最后一个字符的部分笔画
4. 考虑无障碍性，确保被截断的文本能有其他方式访问（如title属性）

实际应用场景

• 表格单元格中的长文本处理
• 导航菜单项的宽度限制
• 卡片列表中的标题截断
• 响应式布局中的空间优化

通过合理使用text-overflow属性，可以在有限空间内优雅地展示长文本内容，提升用户体验和界面美观度。