taro 如何展示多行文本省略號


webkit-box-orient: vertical;

// 多行文本省略號
.box{
	display: -webkit-box;
	overflow: hidden;
	text-overflow: ellipsis;
	word-wrap: break-word;
	white-space: normal !important;
	-webkit-line-clamp: 3;	/*  行數*/
	-webkit-box-orient: vertical;
}

// 單行文本省略號
.text {
    font-size: 38rpx;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis; 
}

bug

https://github.com/NervJS/taro/issues/3890

http://www.daqianduan.com/6179.html

solution

https://www.html.cn/archives/5206

APP / 小程序

  render () {
    return (
      <View className="select-ticket-card-group">
        <View className="select-ticket-card">
          <View className="ticket-card-content">
            <Text className="ticket-type">學生1日票</Text>
            <Text className="ticket-origin-price clearfix">
              <Text className="delete-line">¥ 720</Text>
            </Text>
          </View>
          <View className="ticket-card-content">
            <Text className="select-ticket-card-tag">提前1天預定</Text>
            <Text className="select-ticket-card-tag">17 點之前下單</Text>
            <Text className="select-ticket-card-tag">60分鍾內支付</Text>
            <Text className="ticket-sale-price clearfix">
              <Text>¥</Text>
              <Text>520</Text>
              <Text>起</Text>
            </Text>
          </View>
          <View className="ticket-card-content">
            <View className="ticket-card-info">需提前1天預訂，必須23時45分之前下單，要求必須60分鍾內，\n 需提前1天預訂，必須23時45分之前下單，要求必須60分鍾內，支付完成后商家最晚會在8小時內…</View>
            {/* <Text className="ticket-card-info">需提前1天預訂，必須23時45分之前下單，要求必須60分鍾內，\n 需提前1天預訂，必須23時45分之前下單，要求必須60分鍾內，支付完成后商家最晚會在8小時內…</Text> */}
            <Text className="ticket-card-btn">立即預定</Text>
          </View>
        </View>
      </View>
    )
  }


.ticket-card-info{
  width: 242px;
  height: 32px;
  line-height: 16px;
  font-size: 11px;
  font-family:PingFang-SC-Regular,PingFang-SC;
  font-weight:400;
  color:#999999;
  display: block;
  margin-top: 8px;
  overflow: hidden;
  /* white-space: nowrap; */
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

H5

/*! autoprefixer: ignore next */

多行文本省略號 ...

.ticket-card-info{
  width: 242px;
  height: 32px;
  line-height: 16px;
  font-size: 11px;
  font-family:PingFang-SC-Regular,PingFang-SC;
  font-weight:400;
  color:#999999;
  display: block;
  margin-top: 8px;
  overflow: hidden;
  /* white-space: nowrap; */
  // 需要加上這一句autoprefixer的忽略規則 否則這一行樣式加不上 導致無法展示省略號
  /*! autoprefixer: ignore next */
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
   /*! autoprefixer: ignore next */
  -webkit-box-orient: vertical;
  white-space: normal;
}