300字范文,内容丰富有趣,生活中的好帮手!
300字范文 > grid布局或flex布局被white-space: nowrap撑开的问题

grid布局或flex布局被white-space: nowrap撑开的问题

时间:2018-07-22 11:50:18

相关推荐

grid布局或flex布局被white-space: nowrap撑开的问题

在开启grid布局或flex布局元素的子元素上添加min-width: 0;overflow: hidden;即可恢复到想要的结果。

.product-list {display: grid; // 开启grid布局的元素grid-template-columns: repeat(5, 19%);justify-content: space-between;margin-top: 10px;row-gap: 8px;&-item {min-width: 0;//overflow: hidden; // min-width 和 overflow 二选一.info {margin-top: 4px;.name {font-size: 10px;color: #000000;white-space: nowrap; // 开启nowrap的元素,导致grid布局被撑开overflow: hidden;}}}}

参考:灰太郎778 关于 white-space: nowrap; 影响 display: flex; 布局的问题

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。