因为经常用到,所以还是做个笔记牢记下吧~~
<div class="option-text">
<span v-text ="item.itemValue" class='ellipsis'></span>
</div>
<style>
.ellipsis{word-break: break-all;text-overflow: ellipsis;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden;}
</style>
注意:记得设置宽度
效果图:
部分代码意思:
display:-webkit-box; //将对象作为弹性伸缩盒子模型显示。
-webkit-box-orient:vertical; //从上到下垂直排列子元素(设置伸缩盒子的子元素排列方式)
-webkit-line-clamp:2; //这个属性不是css的规范属性,需要组合上面两个属性,表示显示的行数。