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

问题描述：

期望的效果：

当前超出效果：

当前未超出：

如果将-webkit-box-orient:horizontal;改为 vertical则效果如下：

... 以上省略...
// 二层for 循环start
<view class="hotellist-items-label" wx:if="{{item.promotions.length > 0 }}">
    <view wx:for-items="{{item.promotions}}" wx:for-item="promotions" wx:key="index1" class="preferential-list">
      <view class="hotellist-items-label-flex" wx:if="{{index < 3}}" data-hotel="{{item.hotelId}}" data-hotelname="{{item.nameCh}}" catchtap="handler">
         <text class="label-name">{{promotions.name}}</text>
         <text wx:if="{{index < 2 && index < item.promotions.length - 1}}" style="color: #eb6400; padding: 0 1px;">|</text>
      </view>
    </view> 
     <text wx:if="{{item.promotions.length > 0 }}" style="color: #eb6400; padding: 0 3px 0 0;"> > </text>
</view>
// 二层for 循环end
... 以下省略...

.hotellist-items-label{
    max-width: 180px;
    padding: 0 3px;
    font-size: 10px;
    border: 1px solid  #eb6400;
    border-radius: 3px;
    display:-webkit-box;
    -webkit-line-clamp:1;
    overflow:hidden;
    text-overflow:ellipsis;
    -webkit-box-orient:horizontal;
    word-break:break-all;
}
.preferential-list {
}

能实现吗？

第 1 个答案：

在小程序中 display:-webkit-box 是不一定支持的。而且你是单行文本，就不需要设置这个属性。正常的 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 flex
  &: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

演示Demo

javascript - element el-time-picker 两边任意时段都设置可选， 如何取消自带的禁用功能 ？：结束时间选了20:00 ，开始时间不能选择20:00以后的，同理，开始时间选择了20:00，则结束时间不能选择20 ...