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

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

文本超出省略号是常见的效果，在微信小程序中，可以利用 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

在这个代码中，.label 类设置了文本显示的样式，其中包含文本超出时显示省略号的效果。.content 类设置了文本内容的样式，.text 类负责显示文本内容，并在文本内容之间插入竖线分隔符。

需要注意的是，在小程序中可能不支持 display:-webkit-box 属性，因此对于单行文本的省略显示无需使用它。

以上就是微信小程序文本超出时如何实现省略号效果？的详细内容，更多请关注其它相关文章！