white-space和text-overflow小记

一、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;
}