文本换行和溢出方案

    0

换行

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

参考文章

评论区

共有评论 0

暂无评论