Shulou(Shulou.com)06/01 Report--

This article mainly introduces the relevant knowledge of how to solve the problem of ellipsis under flex, the content is detailed and easy to understand, the operation is simple and fast, and it has a certain reference value. I believe you will gain something after reading this flex ellipsis problem. Let's take a look at it.

Recently, when I was working with WeChat Mini Programs, I found that using ellipses under flex is ineffective, and it will also disrupt the expected structure. Query statckoverflow knows that you need to set min-width:0; in the parent, but under my attempt, it still doesn't work. It turns out that you also need to set min-width:0 at the level where the upper parent is flex. That is, it can be understood that both the flex-item of the ellipsis label and the parent of the flex need to set min-width:0.

CSS:

.flex {display: flex; align-items: center; align-content: center; justify-content: space-between; min-width: 0; / * set * /} .flex _ item {min-width: 0; / * here you need to set * /} .flex _ item--fixed {flex: 0 auto;} .fs-- ellip {overflow: hidden White-space: nowrap; text-overflow: ellipsis;}. Home-shop {max-width: 750px;}. Home-shop__img {width: 98px; height: 98px;}. Home-shop__main {padding: 0 36px 0 18px;} .home-shop__fans {padding: 16px 16px 16px 26px; border-left: 2px solid # eee;}

HTML:

Jay's community mall is a very long text community small mall. 568 number of fans 1898 purchase index This is the end of the article on "how to solve the problem of ellipsis in flex". Thank you for reading! I believe that everyone has a certain understanding of the knowledge of "how to solve the problem of ellipsis under flex". If you want to learn more knowledge, you are welcome to follow the industry information channel.

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.