前端必知必会-CSS文本效果

---

CSS 文本效果

CSS 文本溢出text-overflow

CSS text-overflow 属性指定应如何向用户发出未显示的溢出内容信号。

它可以被剪辑：

或者可以将其呈现为省略号 (…)：

CSS 代码如下：

示例

p.test1 {
white-space: nowrap;
width: 200px;
border: 1px solid #000000;
overflow: hidden;
text-overflow: clip;
}

p.test2 {
white-space: nowrap;
width: 200px;
border: 1px solid #000000;
overflow: hidden;
text-overflow: ellipsis;
}

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

示例

div.test:hover {
overflow: visible;
}

CSS 自动换行

CSS word-wrap 属性允许将长单词拆分并换行到下一行。

如果单词太长而无法容纳在某个区域内，则会扩展到外部：

word-wrap 属性允许您强制文本换行 - 即使这意味着在单词中间拆分它：

CSS 代码如下：

示例
允许长单词被拆分并换行到下一行：

p {
word-wrap: break-word;
}

CSS 断行

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

CSS 代码如下：

示例

p.test1 {
word-break: keep-all;
}

p.test2 {
word-break: break-all;
}

CSS 书写模式

CSS writing-mode 属性指定文本行是水平还是垂直排列。

以下示例显示了一些不同的书写模式：

示例

p.test1 {
writing-mode: Horizo​​ntal-tb;
}

span.test2 {
writing-mode: vertical-rl;
}

p.test2 {
writing-mode: vertical-rl;
}

CSS 文本效果属性

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

属性	描述
text-justify	指定对齐文本的对齐方式和间距
text-overflow	指定未显示的溢出内容应如何向用户发出信号
word-break	指定非 CJK 脚本的换行规则
word-wrap	允许长单词被拆分并换行到下一行
writing-mode	指定文本行是水平还是垂直排列

---

总结

本文介绍了CSS 文本效果属性的使用，如有问题欢迎私信和评论