文本换行和溢出方案

    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 条

暂无评论