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

Hadoop MapReduce Spark Configuration Item

Scope of application The configuration items covered in this article are mainly for Hadoop 2.x and Spark 2.x. MapReduce Official documents https://hadoop.apache.org/doc…Lower left corner: mapred-default.xml Examples of configuration items name value description mapreduce.job.reduce.slowstart.completedmaps 0.05 Resource requests for Reduce Task will not be made until the percentage of Map Task completed reaches that value. mapreduce.output.fileoutputformat.compress false […]