css文字溢出处理方式（单行和多行）

单行文字溢出

width:250px;
overflow:hidden; /* 移除隐藏 */
text-overflow: ellipsis; /* 省略号 */
white-space: nowrap; /* 禁止文字自动换行 */

 

多行溢出

width:200px;
overflow:hidden; /* 溢出隐藏 */
display: -webkit-box;  /* 老版弹性盒子，存在浏览器兼容问题，需要添加-webkit，表示内容在水平方向上的排放 */
-webkit-line-clamp: 2; /* 溢出的行数 */
-webkit-box-orient: vertical; /* 规定内容水平排放 */

 

单行文字和多行文字溢出，经常使用在列表页的文章标题中，固定标题显示的行数，鼠标悬浮的时候，看到完整的标题内容