css中的文本注意知识点

小知识，大挑战！本文正在参与“程序员必备小知识”创作活动

最近做的项目，有处小细节，就是信息文本有的需要换行且文本溢出省略，有的则单行文本溢出省略。顺便复习下，做个总结:

文本溢出省略

单行文本溢出省略:

.ellipsis {
    word-break: break-all;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 220px;
  }

多行文本溢出省略:

.ellipsis {
    text-overflow: -o-ellipsis-lastline;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;//第几行溢出省略
    line-clamp: 3;//第几行溢出省略
    -webkit-box-orient: vertical;
  }

word-break: break-all和word-wrap: break-word区别:

对于一般的div如果要设置了width; 一旦容器里面的文字过多，文本就会自动换行，但是如果输入连续的英文字符，则设置的width 不会生效，容器会被撑开

word-break: break-all和word-wrap: break-word都是用于换行的

区别：

1. word-break:break-all 设置宽度情况下，内容到达宽度会自动换行，如果该行末端有个比较长的英文单词会把单词截断

2. word-wrap:break-word 设置宽度情况下，内容到达宽度会自动换行，会把整个单词看成一个整体，如果该行末端宽度不够显示整个单词，它会自动把整个单词放到下一行，而不会把单词截断掉

补充: 英文字母之间没有空格的话，它会默认认为这是一个英文单词，所以单词就一次输出不换行

语法详解:

word-break: normal | break-all | keep-all | break-word

• normal

  使用默认的断行规则。

• break-all

  对于non-CJK (CJK 指中文/日文/韩文) 文本，可在任意字符间断行。

• keep-all

  CJK 文本不断行。 Non-CJK 文本表现同 normal。

• break-word 

  他的效果是word-break: normal 和 overflow-wrap: anywhere  的合，不论 [overflow-wrap]的值是多少

word-wrap: normal | break-word

• normal

  允许内容顶开指定的容器边界

• break-word

  内容将在边界内换行。如果需要，词内换行（word-break）也行发生说明：设置或检索当当前行超过指定容器的边界时是否断开转行