CSS 文本效果 text-overflow，word-wrap，word-break，writing-mode，text-align-last，text-justify

原创已于 2022-03-01 12:10:49 修改 · 529 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#css #html #前端

于 2022-03-01 11:56:30 首次发布

本文介绍了CSS中用于处理文本溢出、换行和对齐的属性，如text-overflow、word-wrap和writing-mode等。通过示例展示了如何在文本内容超出容器时显示提示，以及如何控制文本在不同场景下的换行和书写方向。同时，还探讨了text-align-last和text-justify属性，用于调整文本最后一行的对齐和整体的分布方式。

CSS 文字溢出 (text-overflow)

CSS text-overflow 属性规定应如何向用户呈现未显示的溢出内容。

下面的例子展示了将鼠标悬停在元素上时如何显示溢出的内容：

CSS 字换行（Word Wrapping）

CSS word-wrap 属性使长文字能够被折断并换到下一行。

CSS 换行规则 (word-break)

CSS word-break 属性指定换行规则。

CSS 书写模式 (writing-mode)

CSS writing-mode 属性规定文本行是水平放置还是垂直放置。

p.test1 {
  writing-mode: horizontal-tb; 
}
span.test2 {
  writing-mode: vertical-rl; 
}
p.test2 {
  writing-mode: vertical-rl; 
}

CSS text-align-last 属性

指定如何对齐文本的最后一行。

text-align-last: auto|left|right|center|justify|start|end|initial|inherit;

CSS text-justify 属性

text-justify 属性指定 text-align:justify 时文本的对齐方式。

该属性规定如何对齐行文本进行对齐和分隔。

text-justify: auto|inter-word|inter-ideograph|inter-cluster|distribute|kashida|trim;

CSS 文本效果属性

下表列出了 CSS 文本效果属性：

属性	描述
text-align-last	指定如何对齐文本的最后一行。
text-justify	指定对齐的文本应如何对齐和间隔。
text-overflow	指定应如何向用户呈现未显示的溢出内容。
word-break	指定非 CJK 脚本的换行规则。
word-wrap	允许长单词被打断并换到下一行。
writing-mode	指定文本行是水平放置还是垂直放置。