25. 文本高级

text-overflow —— 文本溢出处理

当文本超出容器宽度时，text-overflow 控制溢出部分的显示方式。

/* 直接裁剪，不显示任何标记 */
.clip {
    white-space: nowrap;      /* 先禁止换行 */
    overflow: hidden;         /* 溢出隐藏 */
    text-overflow: clip;      /* 裁剪 */
    width: 200px;
}

/* 显示省略号 */
.ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;  /* 溢出部分显示 ... */
    width: 200px;
}

多行省略号

单行省略很简单，多行省略需要额外属性。

/* 最多显示 2 行，超出显示省略号 */
.multiline {
    display: -webkit-box;
    -webkit-line-clamp: 2;           /* 限制行数 */
    -webkit-box-orient: vertical;    /* 垂直排列 */
    overflow: hidden;
    text-overflow: ellipsis;
}

word-wrap —— 长单词换行

当一个单词太长超出容器时，默认不会断开，会把容器撑开。

/* 允许在单词内部断行 */
.wrap {
    word-wrap: break-word;
    width: 200px;
    border: 1px solid #ccc;
}

word-wrap 现已改名为 overflow-wrap，两者效果相同。建议使用新名称。

/* 推荐写法 */
.wrap {
    overflow-wrap: break-word;
}

值	效果
normal	默认，只在允许的断点处换行
break-word	在任意字符间断行，防止溢出

word-break —— 换行规则

word-break 比 word-wrap 更激进，控制具体的断行行为。

/* 只在空格、连字符处断行，中文可以在任意字间断行 */
.p1 {
    word-break: keep-all;
}

/* 在任意字符间断行，英文单词也会被截断 */
.p2 {
    word-break: break-all;
}

值	效果
normal	使用默认换行规则
keep-all	CJK（中日韩）文本不换行，只在空格处断行
break-all	任何字符后都可换行，不保持单词完整

实际场景对比：

/* 中文排版推荐 */
.chinese {
    word-break: break-all;    /* 中文可在任意位置换行 */
}

/* 英文排版推荐 */
.english {
    overflow-wrap: break-word;  /* 保持单词完整，只在必要时断开 */
}

writing-mode —— 书写模式

writing-mode 控制文本的排列方向，实现竖排文字效果。

/* 默认水平排列 */
.horizontal {
    writing-mode: horizontal-tb;
}

/* 垂直排列，从右到左 */
.vertical-rl {
    writing-mode: vertical-rl;
}

/* 垂直排列，从左到右 */
.vertical-lr {
    writing-mode: vertical-lr;
}

<div class="vertical-rl">
    <h2>古诗一首</h2>
    <p>床前明月光，疑是地上霜。</p>
    <p>举头望明月，低头思故乡。</p>
</div>

.vertical-rl {
    writing-mode: vertical-rl;
    height: 300px;
}

text-align-last —— 最后一行对齐

text-align 控制所有行的对齐方式，text-align-last 专门控制最后一行的对齐。

/* 整段两端对齐，最后一行居中 */
.quote {
    text-align: justify;
    text-align-last: center;
}

<p class="quote">
    "Stay hungry, stay foolish."
    —— Steve Jobs
</p>

常见用法：让引用的出处名居中对齐，正文两端对齐。

值	效果
auto	跟随 text-align 的值
left	最后一行左对齐
right	最后一行右对齐
center	最后一行居中
justify	最后一行两端对齐

text-justify —— 对齐方式细节

当 text-align 设为 justify 时，text-justify 控制具体的两端对齐算法。

.justify {
    text-align: justify;
    text-justify: inter-word;     /* 通过调整词间距对齐（默认） */
}

值	效果
auto	浏览器自动选择
inter-word	调整单词间距
inter-character	调整字符间距（适合中文）
none	禁用两端对齐

中文排版推荐：

.chinese-justify {
    text-align: justify;
    text-justify: inter-character;  /* 通过字间距对齐 */
}

综合实战：文章段落排版

把这些属性组合起来，实现一个标准的段落排版效果。

.article {
    max-width: 680px;
    margin: 0 auto;
    line-height: 1.8;
    text-align: justify;
    text-justify: inter-character;
    text-indent: 2em;             /* 首行缩进 */
}

.article::first-letter {
    font-size: 2em;
    float: left;
    margin-right: 4px;
}

/* 标题最后一行居中 */
.article h2 {
    text-align: justify;
    text-align-last: center;
}

/* 引用块 */
.article blockquote {
    text-align: left;
    text-align-last: left;
    border-left: 3px solid #ddd;
    padding-left: 16px;
    color: #666;
}

这样排版的文章，正文两端对齐均匀分布，标题出处居中显示，阅读体验更加专业。

小结

• text-overflow 需要配合 white-space: nowrap 和 overflow: hidden
• 多行省略号用 -webkit-line-clamp，目前需要 -webkit- 前缀
• overflow-wrap: break-word 保持单词完整，适合英文
• word-break: break-all 在任意字符间断行，适合中文
• writing-mode 实现竖排文字，vertical-rl 最常用
• text-align-last 控制最后一行对齐方式