小程序text ellipsis

在小程序中，一般用到的文字标签是view 和text 。如果要用到控制行数（比如控制文本显示2行，多余的省略号代替），则整个文本用 text标签，然后添加主要样式：

  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp:2;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;

如果要用view标签，则要设置高度，不是很好控制。

如果指定只显示一行，限定文本宽度，多余的省略，则可用view标签也可用text标签。

代码如下：

<view class='contain1'>
  为了保证页面的整洁美观，在很多的时候，我们常需要隐藏超出长度的文字。这在列表条目，题目，名称等地方常用到。光标结束位置，自动聚集时有效，需与selection-start搭配使用
</view>

css:

.contain1{
  width: 80%;
  height: 50rpx;
}
.contain1 {
  height: 50rpx;
  font-size: 14px;
  color: #545454;
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp:1;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
}

<view class='contain1'>
  <text> 为了保证页面的整洁美观，在很多的时候，我们常需要隐藏超出长度的文字。这在列表条目，题目，名称等地方常用到。光标结束位置，自动聚集时有效，需与selection-start搭配使用</text>
</view>

.contain1{
  width: 100%;
}
.contain1 text{
  font-size: 14px;
  color: #545454;
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp:2;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
}

具体效果就是这样。