换行
white-space
是否能发挥作用 | 换行符 | 空格 | 自动换行 | |
---|---|---|---|---|
normal | × | ×(合并) | √ | √ |
nowrap | × | ×(合并) | × | √ |
pre | √ | √ | × | √ |
pre-wrap | √ | √ | √ | √ |
pre-line | √ | ×(合并) | √ | √ |
- white-space,控制空白字符的显示,同时还能控制是否自动换行。它有五个值:
normal | nowrap | pre | pre-wrap | pre-line
- word-break,控制单词如何被拆分换行。它有三个值:
normal | break-all | keep-all
- break-all 一律换行 keep-all 一律不换行
- word-wrap(overflow-wrap)控制长度超过一行的单词是否被拆分换行,是
word-break
的补充,它有两个值:normal | break-word
溢出
一行溢出省略号
css.ellipsis{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
多行溢出省略号
css.ellipsis{ display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; text-overflow: ellipsis; }