overflow-wrap(word-wrap)&word-break&white-space+文本超出省略

overflow-wrap(word-wrap)，word-break，white-space

这三个属性真的很容易弄混，没有关系，从命名上来看区别

• 长单词溢出折行规则overflow-wrap(word-wrap):anywhere | break-word | break-all可结合hyphens: auto;使用折行添加连字符
• 单词内断行word-break:normal | break-all | keep-all(CJK 文本不断行) | break-word
• 处理元素中的空白(空格和制表符)white-space : normal | nowrap | pre | pre-wrap | pre-line

  

• text-overflow: ellipsis | clip | '自定义字符串'(需考虑兼容性)针对在块级元素溢出的内容有效，且与块级元素内联(inline)方向一致,需要添加其他属性如overflow:hidden使其溢出

文本超出展示省略号

这是很常见的场景,总结下

• 多行缩略(浅尝辄止)

  .ellipsis_two_line {
      display: -webkit-box;
      overflow: hidden;
      text-overflow: ellipsis;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
  }
  

display:flex是flex2012年的语法,display:box是2009年的语法,需要加上对应浏览器前缀;实际的浏览器测试中，display: flex不能完全替代display:-webkit-box,常见用法是多行超出省略。

• 一行缩略

  .ellipsis {
      overflow: hidden;
      white-space: nowrap;    // 不进行换行
      text-overflow: ellipsis;
  }
  

参考链接