我在底部嵌套了带有文本的flex元素。顶部元素的固定宽度小于text:
.list-header {
display: flex;
width: 150px;
height: 80px;
background-color: #ececec;
}
.list-component {
display: flex;
flex: 1;
padding-left: 24px;
padding-right: 24px;
}
.header-container {
display: flex;
flex: 1;
}
.header-text {
display: flex;
flex-direction: column;
justify-content: center;
overflow: hidden;
}
span {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
<div class="list-header">
<div class="list-component">
<div class="header-container">
<div class="header-text">
<span>long long long long long long text</span>
</div>
</div>
</div>
</div>
我可以通过将overflow: hidden;
应用于所有元素来解决此问题:
.list-header {
display: flex;
width: 150px;
height: 80px;
background-color: #ececec;
}
.list-component {
display: flex;
flex: 1;
padding-left: 24px;
padding-right: 24px;
overflow: hidden;
}
.header-container {
display: flex;
flex: 1;
overflow: hidden;
}
.header-text {
display: flex;
flex-direction: column;
justify-content: center;
overflow: hidden;
}
span {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
<div class="list-header">
<div class="list-component">
<div class="header-container">
<div class="header-text">
<span>long long long long long long text</span>
</div>
</div>
</div>
</div>
但我真的不喜欢这个解决方案。
是否有办法仅使用flex属性来修复它?
答案 0 :(得分:7)
弹性项目的初始设置为min-width: auto
。这意味着弹性项目不能短于其内容的宽度。
您在文本元素上有white-space: nowrap
。因此,所有flex项目祖先都必须扩展(以多米诺骨牌效应)以适应文本的长度。
受影响的弹性项目是:
.list-component
.header-container
.header-text
因此,为了防止文本溢出主容器,您需要覆盖min-width: auto
默认值。 flexbox规范提供了两种方法:
min-width: 0
添加到弹性项目overflow
以外的任何值添加visible
以灵活项目。 (这就是为什么你能够通过添加overflow: hidden
来解决问题的原因。它实际上是一个干净有效的解决方案。)在这篇文章中更详细地解释了这种行为:
.list-header {
display: flex;
width: 150px;
height: 80px;
background-color: #ececec;
}
.list-component {
display: flex;
flex: 1;
padding-left: 24px;
padding-right: 24px;
min-width: 0; /* NEW */
}
.header-container {
display: flex;
flex: 1;
min-width: 0; /* NEW */
}
.header-text {
display: flex;
flex-direction: column;
justify-content: center;
min-width: 0; /* NEW */
}
span {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
<div class="list-header">
<div class="list-component">
<div class="header-container">
<div class="header-text">
<span>long long long long long long text</span>
</div>
</div>
</div>
</div>