溢出打点

溢出打点是在写界面效果的时候一个避不开的东西。

溢出打点总体分两种情况：

单行溢出

数字和英文

因为数字和英文本身在浏览器中就不会换行，所以不存在换行问题。来看看吧

overflow: hidden;
溢出隐藏
text-overflow: ellipsis;
文字溢出打点
这里必须两个属性配套使用，单单使用text-overflow: ellipsis;是无法达到效果的。
浏览器不会直接将超出盒子宽度的文字或者数字和英文视为溢出。这也许是个bug，说不好哪天浏览器就将其修复了。
关于溢出的属性，后期会再开一篇博客

文字

假如文字仅仅设置overflow: hidden;与text-overflow: ellipsis;属性是达不到单行溢出换行的。

哪怕，你将div的高度设置到只有一行：

如果我们想让div出现单行换行的效果，那么我们必须给它再添上一个文字不换行的功能：white-space: nowrap;

多行溢出

数字和英文

由于数字和英文默认不能换行，那么在我们使用多行溢出的时候，首先要给它设置允许长单词和url地址换行的属性：
work-wrap：break-work；
同时我们还需要给它们设置两个属性:
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
最后一个是用来控制行数的。这里是三行打点

看出来了吧，这里还是有bug的，当然文字也有同样的bug，这个浏览器的问题，不是我们使用的问题，所以在设置高度的时候需要注意一下

文字

直接来看效果吧

总结：我知道大多数人看这篇博客会比较迷茫，主要是这些属性为什么要这样设置。我只能说以后有时间我会慢慢把这些东西补全。