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

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

webkit-box-orient: vertical;

See the Pen Pure CSS multiline text with ellipsis by xgqfrms
(@xgqfrms) on CodePen.

// 多行文本省略号
.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

1. /*! 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;
}

Taro 踩坑指南

CSS multi-lines ellipsis 多端不一致问题

https://cathe-zhang.github.io/blog/Taro/Taro踩坑指南.html

---

---

xgqfrms 2012-2020

www.cnblogs.com 发布文章使用：只允许注册用户才可以访问！

---