CSS实现文本显示两行,超出部分显示省略号

2022-07-23 08:36:56

因为经常用到,所以还是做个笔记牢记下吧~~

<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的规范属性,需要组合上面两个属性,表示显示的行数。

  • 作者:武小脏~
  • 原文链接:https://blog.csdn.net/mengmeng1_/article/details/104163689
    更新时间:2022-07-23 08:36:56