美文网首页
超出多行部分隐藏,显示省略号

超出多行部分隐藏,显示省略号

作者: forever_bin | 来源:发表于2023-02-06 10:56 被阅读0次

内容太多显示不下可以用css来控制,超出的部分显示省略号

//内容如下
<view class="wrapStyle">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet eius incidunt, itaque odit ratione reiciendis tempora voluptas. Ad, saepe tempora. Accusantium alias blanditiis cupiditate deserunt est facilis laudantium nisi quo.
</view>

1、常见的css样式如下

.wrapStyle {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
效果如图

这种只能显示一行,但是有时候又有这样的需求,要求超出两行隐藏显示省略号,或者三行
四行等。
2、超出指定行数再显示省略号并隐藏、样式如下

.wrapStyle {
    word-break: break-all;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3; /* 这里是超出几行省略 */
    overflow: hidden;
  }
当 -webkit-line-clamp: 1时 当 -webkit-line-clamp: 2时 当 -webkit-line-clamp: 3时

相关文章

网友评论

      本文标题:超出多行部分隐藏,显示省略号

      本文链接:https://www.haomeiwen.com/subject/euhtkdtx.html