uni-app、css 文字自动换行、多行溢出显示省略号

1.标签p数字自动换行

<p class="word-break">467464646343437437437437437</p>

.word-break{
  word-break: break-all;
  width:60px
}

2.单行显示溢出显示省略号

<view class="white-space">1.虚无，是我的性格。
2.刀鞘？丢失了。
3.跟马上会挂掉的人争夺粉丝，真的很没有成就感。（挑衅）
4.所谓武技，不过是遇害者数字的累积而已。</view>



.white-space{
   height: 80rpx;
   width: 360rpx;
   overflow:hidden;
   text-overflow:ellipsis;
   white-space:nowrap;
}

3.多行显示溢出显示省略号

<view class="white-space">1.虚无，是我的性格。
2.刀鞘？丢失了。
3.跟马上会挂掉的人争夺粉丝，真的很没有成就感。（挑衅）
4.所谓武技，不过是遇害者数字的累积而已。</view>



.white-space{
  height: 80rpx;
  width: 360rpx;
  overflow:hidden;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:3;//显示的行数

}

4.字母开头大写

<view class="capitalize">lan陵王  1.虚无，是我的性格。</view>
<view class="capitalize">wang昭君2.刀鞘？丢失了。</view>



.capitalize{
  height: 80rpx;
  width: 360rpx;
  text-transform:capitalize;
}

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