// 一般写好盒子的 宽度 后,就可以使用下面样式
// 超出隐藏
// 末尾加省略号
// 不换行
// 行内元素转换行内块元素。(CSS2.1 新增的值)
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
display: inline-block;
但是
1 遇到flex布局,宽度不够的话,会与上面属性有冲突;
2 或者需要多加几行显示;
所以可以换一种
overflow: hidden;
// 下面是显示几行写数字几就行
-webkit-line-clamp: 2;
display: -webkit-box;
-webkit-box-orient: vertical;
text-overflow: ellipsis;
-webkit-line-clamp
CSS 属性 可以把 块容器 中的内容限制为指定的行数.
它只有在 display 属性设置成 -webkit-box
或者 -webkit-inline-box
并且 -webkit-box-orient (en-US) 属性设置成 vertical
时才有效果
在大部分情况下,也需要设置 overflow 属性为 hidden
, 否则,里面的内容不会被裁减,并且在内容显示为指定行数后还会显示省略号(ellipsis ).