微信小程序文本超出时如何实现省略号效果？

发布日期： 2024-10-24 阅读量： 作者： 网络

微信小程序超出省略号(图)如何实现？

文本超出省略号是常见的效果，在微信小程序中，可以利用 text-overflow: ellipsis 和 overflow: hidden 属性实现。但是，针对一行文本的省略显示，可以无需设置 display: -webkit-box 属性，只需使用正常的 display: block 即可。

以下是实现超出省略号效果的代码：

.label
  width 100vw
  max-width 200px
  line-height 20px
  font-size 13px
  color #dc864a
  padding 0 5px
  border 1px solid @color
  border-radius 3px
  margin 10px
  display block
  &:after
    content ">"
    flex 0 0 auto
    display block
  .content
    width 0
    flex 1
    word-wrap normal
    white-space nowrap
    text-overflow ellipsis
    overflow hidden
    .text
      display inline-block
      &:first-child:before
        display none
      &:before
        content "|"
        margin 0 3px
        display inline-block

# 微信 # overflow

上一篇: 微信小程序购物商城系统开发所需工具

下一篇: 重新的标题为：执行功能()

微信小程序文本超出时如何实现省略号效果？

随便看看