css文本溢出容器时的处理

修改主题当中发现不同分辨率下的布局会有溢出的现象，本来图片周围只留了6个像素，结果在移动端显示的时候底部被撑开了许多。移动端显示面积较小，文章的内容简介由原来的三行文本变成了四行，撑开了容器的高度。虽然不至于打乱布局，但这种不可控的感觉还是会逼死强迫症，搜索了一下，css当中预设了文本溢出的解决方案：

单行文本溢出

overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

对于单行文本，只需要为元素加入以上语句就可以了，比如处理一个过长的标题，当其超出父元素长度的时候，会隐藏超出部分的文本，并在截断处添加“...”符号。以上文本应用于“p”元素时正常作用，实际应用中遇到链接“a”元素时仍旧会产生溢出，猜测是因为p元素属于块级元素，而a属于行内元素，想要正确截断a元素的文本，可以在上面的基础上添加一个“display:block”:

display:block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

多行文本溢出

overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;

多行文本的处理方式如上，以上语句强制将段落内文本显示为3行，第3行超出部分会被截断并添加省略号，行数可以根据自己实际需求进行更改，改动一下“-webkit-line-clamp”的值就可以了。