一、white-space
1.1 作用
设置空白处理和换行规则
1.2 可选值
normal
:默认值,合并
所有连续的空白,允许
单词超屏时自动换行nowarp
:合并
所有连续的空白,不允许
单词超屏时自动换行pre
:阻止合并
所有连续的空白,不允许
单词超屏时自动换行pre-wrap
:阻止合并
所有连续的空白,允许
单词超屏时自动换行pre-line
:合并
所有连续的空白(保留换行
),允许
单词超屏时自动换行
二、text-overflow
2.1 作用
设置文字溢出时的行为
,其生效前提是overflow
不为visible
2.2 可选值
clip
:溢出的内容直接被裁减掉,会导致字符显示不完整ellipsis
:溢出行的结尾处用省略号表示
2.3 超2行或多行省略号
效果如图:
CSS样式:
.line {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2; // 指定行数
line-clamp: 2;
-webkit-box-orient: vertical;
}