1.单行文本溢出
/* 主要来说就是4个属性 */
width:300px; /* 1.设置文本的宽度 */
white-space:nowrap; /* 2.强制文本不换行*/
overflow:hidden; /* 3.溢出文本部分不显示*/
text-overflow:ellipsis; /* 4.显示省略符号来代表被修剪的文本。*/
对应显示结果如图所示:
2.多行文本溢出
适用WebKit浏览器或移动端的页面
width:300px; /* 设置宽度 (非必须)*/
display: -webkit-box; /* 设为灵活盒模型*/
-webkit-box-orient: vertical; /* 垂直排列*/
-webkit-line-clamp: 2; /* 显示两行*/
overflow: hidden; /* 溢出隐藏*/
对应结果如图: