元素内数据超出2行的显示为省略号...

最新推荐文章于 2024-07-19 14:40:55 发布

Will_Season

最新推荐文章于 2024-07-19 14:40:55 发布

阅读量125

点赞数

文章标签：前端

本文链接：https://blog.csdn.net/Will_Season/article/details/132068486

版权

<div class="box">
  测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试
</div>

<style>
    .box{
      width: 200px; /* 设置容器的宽度 */
      display: -webkit-box; /* 将容器作为弹性盒子显示 */
      -webkit-box-orient: vertical; /* 设置弹性盒子为垂直方向排列 */
      -webkit-line-clamp: 2; /* 显示的行数 */
      overflow: hidden; /* 超出容器部分隐藏 */
      text-overflow: ellipsis; /* 超出容器部分显示省略号 */
    }
</style>