WeChat applet text overflows and omits, and the displayed content exceeds the omitted content

The total container height at this point is 150rpx

<view class="omit" style=" height: 150rpx;">表现:{
   
   {item.symptom}}</view>
.omit{
  font-size: 26rpx;
  color: #808080;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

 After modifying the height of the view to 100rpx, the display is normal

<view class="omit" style=" height: 100rpx;">表现:{
   
   {item.symptom}}</view>

 Reason: The total height of the omitted text must be consistent with the height of the container, and cannot be set casually. The total height of the text can be calculated by the font height * the number of lines to be omitted

Guess you like

Origin blog.csdn.net/weixin_57997644/article/details/127332188