How to keep the content within the container when the flex layout is stretched by child elements

On mobile devices, flex layout is very useful. It can automatically adjust the width of the container according to the width of the device. However, I recently found a problem when working on a project:

A li element has flex set, flex: 0 0 33.333%, and the text in the child element should be automatically omitted if it exceeds the width defined by flex.

<li>
    <a href="">
        <img src="upload/2022/web/5a1692eeN105a64b4.png" alt=""> 
        <p>Xiaomi Xiaomi Xiaomi Xiaomi Xiaomi Xiaomi Xiaomi Xiaomi Xiaomi Xiaomi Xiaomi Xiaomi Xiaomi Xiaomi Xiaomi</p>
    </a>
</li>

ul{
     display: flex;
}
li{
    -webkit-box-flex: 0;
    -ms-flex: 0 0 33.333%;
    flex: 0 0 33.333%;
    text-align: center;
    padding: 0 1.333vw;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    margin-bottom: 2.667vw;
}
lip{
    font-size: 3.2vw;
    color: #8F8E94;
    text-overflow: ellipsis;
    white-space: nowrap;
}

At this time, you will find that the text of p may be very long and needs to be hidden on some devices, that is, it does not wrap and leaves an ellipsis... as a mark.

Here you will find that text-overflow: ellipsis does not take effect and the ellipsis does not appear at all. And because nowrap is set, you will find that the text will expand the content, causing the content to exceed the screen. So this problem must be solved.

Try to cancel the flex: 0 0 33.33% of the parent element .li, but it doesn't work.

Try to cancel the display: flex of the ul container, and the ellipsis will appear.

Therefore, it is speculated that it is a problem with the flex layout, and further speculated that the ellipsis needs to limit the width of the parent element.

Trying to set width: 100% on the parent element li does not work, but setting width: 0 works. Right now:

li{
    flex: 0 0 33.333%;
    width: 0
}

If the width is not set, li can be infinitely expanded by child nodes; therefore, p always has enough width to display all text in one line, and the truncation effect cannot be triggered. There is another way to test the effect:

li{
    flex: 0 0 33.333%;
    overflow: hidden;
}

The above two methods can achieve the desired effect, that is, when the flex value is set for li, it will dynamically obtain the remaining width of the parent container and will not be stretched by its own child elements.

• Setting max-width for html and body elements seems to force the page width;
• Set overflow for body, the page width cannot be expanded, but the element width remains, that is, the element itself still overflows;
• Set max-width and overflow for html and body at the same time. The page width is limited to max-width, but the element itself still overflows.
• Set overflow: hidden to the .main container. Similarly, .main does not overflow, but .notice itself still overflows.
• Setting width or max-width for the .notice element, although the width is limited, the ellipsis... is not fully displayed at a certain width, sometimes only two dots are displayed..

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.