# 文字处理
# 强制换行
pre {
white-space: pre-wrap;
word-wrap: break-word;
}
1
2
3
4
2
3
4
# 用CSS动画实现省略号动画
.point:after {
overflow: hidden;
display: inline-block;
vertical-align: bottom;
animation: ellipsis 2s infinite;
content: "\2026";
}
@keyframes ellipsis {
from {
width: 2px;
}
to {
width: 15px;
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
# 长文本自动换行
pre {
white-space: pre-line;
word-wrap: break-word;
}
1
2
3
4
2
3
4
# 单行文本溢出截断
div {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
background: #ff7733;
color: white;
}
1
2
3
4
5
6
7
2
3
4
5
6
7
# 单行最多展示九个字
# 多行文本溢出截断
- 使用-webkit-line-clamp
p {
width: 400px;
text-overflow: ellipsis;
display: -webkit-box;
overflow: hidden;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
text-align: justify;
}
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
要注意概属性需要与以下属性配合：
它需要和 display、-webkit-box-orient 和 overflow 结合使用：
display: -webkit-box; 必须结合的属性，将对象作为弹性伸缩盒子模型显示。-webkit-box-orient; 必须结合的属性，设置或检索伸缩盒对象的子元素的排列方式text-overflow: ellipsis; 可选属性，可以用来多行文本的情况下，用省略号“…”隐藏超出范围的文本。
# 自定义文本选择的样式
<p class="custom-text-selection">Select some of this text.</p>
1
::selection {
background: aquamarine;
color: black;
}
.custom-text-selection::selection {
background: deeppink;
color: white;
}
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
# 文字保持原有样式显示
<pre style={{ whiteSpace: 'pre-wrap', wordWrap: 'break-word', color: '#ff0a0a' }}>
{item.content}
</pre>
1
2
3
2
3
# 输入框标签文字浮动
# 渐变文字
.gradient-text {
background: -webkit-linear-gradient(pink, red);
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
}
1
2
3
4
5
2
3
4
5
# 蚀刻文字效果
.etched-text {
text-shadow: 0 2px white;
font-size: 1.5rem;
font-weight: bold;
color: #b8bec5;
}
1
2
3
4
5
6
2
3
4
5
6