WX-MiniPrograme|单行、多行文本末尾省略

多行文本末尾省略...:

.news-text {

  width: calc(100% - 300rpx);

  line-height: 50rpx;

  display: -webkit-box;

  overflow: hidden;

  text-overflow: ellipsis;

  box-sizing: border-box;

  word-break: break-all;

  -webkit-box-orient: vertical;

  -webkit-line-clamp: 3;

}

单行文本末尾...:

.news-title {

  width: calc(100% - 300rpx);

  line-height: 40rpx;

  display: block;

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;

}

对比可发现两者差异。

实例效果:


最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    love2013阅读 2,452评论 0 11
  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    wzhiq896阅读 2,127评论 0 2
  • 今天在牛客看到一篇关于阿里面试的帖子,对于一些面试的技巧和一些问答的方式,感觉对新手面试还是很有帮助的,所以在这里...
    Theriseof阅读 2,303评论 1 17
  • 注册简书ID近三个月了,写的文章没有人看过:(也没有一个粉丝关注我:(55555……今天终于迎来了第一个粉丝关注,...
    丁丁灵阅读 277评论 3 0
  • 新年第一天,全家人准备去看电影。去年还是前年看了/西游降魔篇/,觉得还不错,于是今年的伏妖篇自然不能错过。 买好了...
    米小喆阅读 254评论 0 0

友情链接更多精彩内容