Flex layout realizes left text overflow and omits right text adaptation

I want to achieve a situation where the width of the text on the left can be automatically adjusted according to the length of the text. When one line cannot be displayed, the space for the text on the right will not be squeezed, and the text on the left will overflow and be omitted. Similarly, when the text on the right becomes longer, the text on the right is fully displayed, and the text on the left is squeezed and overflows, resulting in the effect of being omitted. What I said may not be very clear, let's take a look at the effect picture.

1. The width of the text on the right is the same as the text on the right, and the left side occupies all the remaining space by default.

2. The width of the text on the right is the same as 1. The text on the left is very long and overflows.

3. The text on the left is the same as 2, but the text on the right has two "right" added to it.

Below is the style:

.footer {
  width: 300px;
  height: 20px;
  display: flex;
  overflow: hidden;
}
.left {
  background: #3cc8b4;
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 50px;
}
.right {
  background: #9bc;
  max-width: 250px;
}
.right-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

<div class="footer">
   <div class="left">
     leftleftleftleftleftleftleftleftleftleftleftleft
  </div>
  <div class="right">
    <div class="right-ellipsis">
      rightrightrightrightrightrightrightright
    </div>
  </div>
</div>

The code adds max-width, min-width and a div called right-ellipsis. To achieve the following effects:

We can achieve different effects according to our needs. Summary of design requirements: The width on the left side grows automatically, the width on the right side grows automatically and cannot overflow or be omitted. When the length of the left text exceeds the limit, the left text overflows and is omitted. The effect is as follows:

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.