要让 flex-child 截断带有省略号的文本，可以给父级一个 min-with:0。在我的项目中，子组件嵌套在几乎 10 个不同的弹性容器中。我是否需要给所有父母一个 min-width:0 或者有更好的解决方法吗？
sandbox https://codepen.io/wong3000/pen/OJzvJOQ
body {
width: 400px;
}
.flex-parent {
display: flex;
padding: 10px;
border: solid;
}
.flex-parent-parent {
display: flex;
border: solid;
padding: 10px;
}
.flex-parent-parent-parent {
display: flex;
border: solid;
padding: 10px;
}
.long-and-truncated {
flex: 1;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
<div class="flex-parent-parent-parent">
<div class="flex-parent-parent">
<div class="flex-parent">
<div class="flex-child long-and-truncated">
1. This is a long string that is OK to truncate please and thank you
</div>
</div>
</div>
</div>
这是由于弹性项目的自动最小尺寸 https://www.w3.org/TR/css-flexbox-1/#min-size-auto。有一个解释这种行为的优秀答案 https://stackoverflow.com/a/36247448/6036546其中说：
如果您正在处理 HTML 结构的多个级别上的 Flex 项目，则可能需要覆盖较高级别项目上的默认 min-width: auto / min-height: auto 。
基本上，具有 min-width: auto 的更高级别的 Flex 项目可以防止使用 min-width: 0 嵌套在下面的项目收缩。
你需要覆盖min-width以某种方式在链上的每个柔性容器上。它不一定是0只是除以下之外的任何值auto。例如：
body {
width: 400px;
}
.flex-parent,
.flex-parent-parent,
.flex-parent-parent-parent {
display: flex;
padding: 10px;
border: solid;
min-width: 200px;
}
.flex-parent {
min-width: 0;
}
.long-and-truncated {
flex: 1;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
<div class="flex-parent-parent-parent">
<div class="flex-parent-parent">
<div class="flex-parent">
<div class="flex-child long-and-truncated">
1. This is a long string that is OK to truncate please and thank you
</div>
</div>
</div>
</div>
在我的示例中，我将所有 Flex 容器设置为具有相同的min-width值，但这不是必需的。您可以根据布局中的需要将每个设置设置为唯一。
.flex-parent { min-width: 0; }
.flex-parent-parent { min-width: 100px; }
.flex-parent-parent-parent { min-width: 400px; }
还有另一种方法可以实现此行为，但仍然涉及所有嵌套的 Flex 容器：
.flex-parent,
.flex-parent-parent,
.flex-parent-parent-parent {
display: flex;
box-sizing: border-box;
max-width: 100%;
}
通过设置一些组合min-width and/or max-width在每个嵌套的弹性容器上，您应该能够截断文本。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
