此代码具有最小宽度工作。
.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;
}
.header-container {
display: flex;
flex: 1;
min-width: 0;
}
.header-text {
display: flex;
flex-direction: column;
justify-content: center;
min-width: 0;
}
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>
但是,如果将 align-items: flex-start;
设置为 .header-text
,则 min-width 将不起作用。这是代码。
.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;
}
.header-container {
display: flex;
flex: 1;
min-width: 0;
}
.header-text {
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start; /* ADD THIS!! */
min-width: 0;
}
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-direction
有效果,并将min-width: 0;
更改为min-height: 0;
,但是但没有成功。
另外,我阅读了它的规范,但我无能为力。
- https://drafts.csswg.org/css-flexbox/#min-size-opt
- https://drafts.csswg.org/css-flexbox/#align-items-property
我还是第一次见到这种现象。 为什么会出现这种情况?有解决办法吗?
谢谢。
最佳答案
问题并不像您想象的那样与 min-width
相关,因为如果添加边框,您将看到所有元素都没有溢出(由于 min-width:0
) 并且只有最后一个跨度溢出
.list-header {
display: flex;
width: 150px;
height: 80px;
background-color: #ececec;
border:2px solid red;
}
.list-component {
display: flex;
flex: 1;
padding-left: 24px;
padding-right: 24px;
min-width: 0;
border:2px solid blue;
}
.header-container {
display: flex;
flex: 1;
min-width: 0;
border:2px solid green;
}
.header-text {
display: flex;
flex-direction: column;
justify-content: center;
align-items:flex-start;
min-width: 0;
border:2px solid yellow;
}
span {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
border:2px solid;
}
<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>
因此我们可以简化您的问题,如下所示:
.header-text {
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
min-width: 0;
border: 2px solid yellow;
width: 150px;
}
span {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
border: 2px solid;
}
<div class="header-text">
<span>long long long long long long text</span>
</div>
为什么align-items
会破坏你的代码?很简单,因为初始值为 stretch
,这意味着您的 span 的宽度将被拉伸(stretch)以适合 Flex 容器的宽度(就像执行 width:100%
一样)。通过更改对齐方式,您将不再具有此功能,并且会产生溢出。
要解决此问题,您只需使用 width:100%
即可。主要思想是拥有一个属性,该属性将强制宽度为父元素的全宽度,以便限制元素的宽度,从而省略号将起作用:
.header-text {
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
min-width: 0;
border: 2px solid yellow;
width: 150px;
}
span {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
border: 2px solid;
width:100%;
}
<div class="header-text">
<span>long long long long long long text</span>
</div>
以及您的初始代码:
.list-header {
display: flex;
width: 150px;
height: 80px;
background-color: #ececec;
border:2px solid red;
}
.list-component {
display: flex;
flex: 1;
padding-left: 24px;
padding-right: 24px;
min-width: 0;
border:2px solid blue;
}
.header-container {
display: flex;
flex: 1;
min-width: 0;
border:2px solid green;
}
.header-text {
display: flex;
flex-direction: column;
justify-content: center;
align-items:flex-start;
min-width: 0;
border:2px solid yellow;
}
span {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
border:2px solid;
width:100%;
}
<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>
关于css - 最小宽度不适用于嵌套 Flexbox,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53476420/