Display: flex;’Problems caused by the use of’white-space: nowrap;’in the layout

Time:2019-8-23

Demand:

The expected effect of layout in item is: a round user’s head on the left side, a nickname on the top and a personalized signature on the bottom of the right side (single line display, the maximum width beyond the actual display is replaced by’…’). As shown in the figure:

Display: flex;'Problems caused by the use of'white-space: nowrap;'in the layout

Code:

Wxml layout:

<view class="member-item">
    <image class="avatar"></image>
    <view class="info">
      <view class="name">name</view>
      Viewclass= "signature"> This person is lazy and doesn't write anything. The man was lazy and didn't write anything. </view>
    </view>
  </view>

Wxss style:


.member-item {
  margin-top: 1px;
  padding: 15rpx 30rpx;
  display: flex;
  flex-direction: row;
  background-color: white;
  width: auto;
}
 
.avatar {
  background-color: whitesmoke;
  width: 96rpx;
  height: 96rpx;
  border-radius: 50%;
}
.info {
  display: flex;
  flex-direction: column;
  margin-left: 30rpx;
  flex: 1;
}
.name {
  font-size: 30rpx;
  color: #333;
  line-height: 48rpx;
}
.signature {
  font-size: 28rpx;
  color: #888;
  line-height: 48rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

Effect:

Display: flex;'Problems caused by the use of'white-space: nowrap;'in the layout

Questions:

In order to adjust the screen size, the parent layout uses flex, and the view corresponding to personalized signature is signature. I use “overflow: hidden; text-overflow: ellipsis; white-space: nowrap;” to realize single-line display, and use’…’instead of the actual maximum width. But the actual effect is as shown in the figure above. When the content exceeds the actual display width, the left layout is extruded to display the content in the signature, resulting in the distortion of the left layout and even extrusion.

Terms of settlement:

Add styles to the parent layout info of signaturemin-width: 0;It can be solved.

Recommended Today

Promising, hypertextview (v3.2.1)

Hi, developer, to see the newSuperTextViewNow! 💡 all of the above demonstrations were conducted bySuperTextViewStrong drive support. SuperTextViewThe difference is that it’s just a simple control element, but not just a control. It is flexible and changeable, with powerful embedded logic, providing you with rich and colorful but extremely simple development support. SuperTextViewSave you from […]