随手记：div内容换行和不换行处理，内容超出省略号处理

1.内容超出显示省略号：

这个一般会做成公共样式：
 

1.超出一行显示...
.text-ellipsis{ 
    overflow: hidden; 
    white-space: nowrap; 
    text-overflow: ellipsis;
}

2.超出两行显示...
.text-ellipsis-2{ 
    display: -webkit-box; 
    overflow: hidden; 
    text-overflow: ellipsis; 
    -webkit-line-clamp: 2; 
    -webkit-box-orient: vertical;
}

2.富文本原本的内容是有换行的，但是流转到移动端拿到数据处理之后没有换行了
 

style="white-space: pre-line"

3.div内容有没换行的情况：

如果内容包含了字母或者数字，导致看起来没有换行
使用word-break:break-all和word-wrap:break-word都是能使其容器如DIV的内容自动换行
 

1、word-break:break-all 例如div宽200px，它的内容就会到200px自动换行，如果该行末端有个英文单词很长（congratulation等），它会把单词截断，变成该行末端为conra(congratulation的前端部分)，下一行为tulation（conguatulation）的后端部分了。

2、word-wrap:break-word 例子与上面一样，但区别就是它会把congratulation整个单词看成一个整体，如果该行末端宽度不够显示整个单词s，它会自动把整个单词放到下一行，而不会把单词截断掉的。


所以一般兼容中英文数字的换行，我选择word-break:break-all;就不会超出div的宽度了