Shulou(Shulou.com)05/31 Report--

This article mainly explains "how to solve flex-basis text overflow problem in CSS", interested friends may wish to take a look. The method introduced in this paper is simple, fast and practical. Let's learn how to solve flex-basis text overflow problem in CSS.

1. flex family

Flex has many attributes, we often use the following operations:

.container { display: flex;}.container > .left { flex: 1;}.container > .right { flex: 1;}

This makes it easy to achieve a left-right split layout.

Let's look at an example of a problem:

Document div { padding: 5px; border: 1px solid #ccc; } .no-effect { align-items: center; margin: 100px; width: 200px; color: #999; } .no-effect > div:first-of-type { margin-right: 10px; } p { color: red; } .no-wrap { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } I'm shorter. I'm long, no kidding. I can grow to the end.

The effect we want:

But the actual effect:

Why did this happen?

2. flex-basis is in the way.

flex: auto is actually a collection of three attributes:

flex-grow: 1;flex-shrink: 1;flex-basis: auto;

flex-grow indicates magnification, flex-shrink indicates contraction, and flex-basis indicates the amount of principal axis space occupied by the item before allocating excess space.

The div on our left does not zoom in, does not shrink, and has a fixed width of 80px; the div on the right automatically fills the remaining width, that is, 200px - 80px = 120px, but the actual effect is far beyond 120px, which is caused by the calculation when flex-basis is auto.

Let's look at the history of flex-basis: auto:

At first flex-basis is determined by width/height;

Then there was bug 1032922, where the flex-basis calculation became determined by the width along the major axis;

Later, a bug 1093316 appeared, which changed back to width/height and a new concept of content to automatically calculate width/height.

So when we don't set width for flex-basis elements, flex-basis: auto determines width by internal content and is limited by max/min-width.

Thus, in the case of free internal content, the width of the flex-basis element depends on max/min-width.

The default value for max-width is none, while the default value for min-width is usually 0, but here it is auto, which is why "exception" occurs.

flex-basis elements:

Common Elements:

3. solution

Once we know why, we can prescribe the right medicine.

First of all, naturally set the width attribute, as long as the width is less than the remaining space, generally set to width: 0; this can be 100% sure that it is less than the remaining space;

Min-width is the same as min-width. Since min-width:auto of flex item, we also set a value less than the remaining space, usually min-width: 0;

Setting overflow:hidden to limit overflow effects is also consistent.

Three ways to solve this problem are introduced, and then let's talk about the reasons why the first two can be solved.

The first is simple, width is set to 0, but flex-basis will let the elements fill the remaining space, so it will be full, because P elements have no line display ellipses, it will be displayed normally.

What about the second?

The second case is more complicated. When we set min-width to a value other than auto, we will use the shrink-to-fit algorithm. The calculation mechanism of this algorithm is as follows:

min(max(preferred minimum width, available width), preferred width)

Translated into English:

preferred minimum width: minimum width

Available width: Available width, that is, the width of the content box

preferred width: preferred width, width without line breaks except for explicit line breaks

width of shrink-to-fit = min ( max (minimum width, available width) , preferred width)

Then calculate:

Minimum width: 0

Available width: 272px

Preferred width: 200 -some random values remaining (98px)

The calculations yield:

max(0, 272) = 272

min(272, 98) = 98

So the final width is the remainder of 98px, and when we manually set min-width: 110px we can see that it overflows.

At this point, I believe everyone has a deeper understanding of "how to solve flex-basis text overflow problems in CSS," so let's actually operate it! Here is the website, more related content can enter the relevant channels for inquiry, pay attention to us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.