在响应式布局中如果一行标题或一段文字超过了预期的字符数就会导致页面布局发生变化,解决这种情况最好的办法就是当文本溢出时自动使用省略号替代溢出的内容,使用 CSS 很容易实现,废话不多说,上代码:

一、单行

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

二、多行

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

-webkit-line-clamp 控制显示几行。