小程序限制text单行或多行溢出省略显示

小程序限制text单行或多行溢出省略显示。

以下部分属性是非标准的,mdn官方提示:请尽量不要在生产环境中使用它!

自适应布局webkit-box

-webkit-box-orient规定盒子的子元素应该被水平或垂直排列

horizontal 在水平行中从左向右排列子元素。

vertical 从上向下垂直排列子元素。

-webkit-line-clamp 限制在一个块元素显示的文本的行数

限制单行文本显示

text-overflow: ellipsis隐藏部分用省略号代替
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;

限制多行文本显示

.pname{
  font-size: 30rpx;
  line-height: 42rpx;
  display: -webkit-box;
  word-break: break-all;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
}

发表评论

电子邮件地址不会被公开。 必填项已用*标注