我想要截断 Flexbox 元素中的文本。这完全没问题。但如果这个 Flexbox 元素包裹在另一个 Flexbox 元素中,它就会崩溃。有没有办法让一切变得流畅并且不会破裂?
我做了一支笔,你可以看到它在这里断了:http://codepen.io/anon/pen/apJYaN
.accordeon {
width: 300px;
background-color: #eeeeee;
}
.accordeon__row {
/* if you remove this, then it works */
display: flex;
}
.accordeon__row-label {
flex-basis: 30%;
}
.accordeon__row-content {
list-style-type: none;
padding-left: 0;
margin-bottom: 0;
margin-top: 0;
}
.accordeon__row-item {
display: flex;
}
.accordeon__row-value {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
<div class="accordeon">
<div class="accordeon__row">
<div class="accordeon__row-label">
Mobility
</div>
<ul class="accordeon__row-content">
<li class="accordeon__row-item">
<div class="accordeon__row-value">
1 min
</div>
<div class="accordeon__row-value">
Supermarket
</div>
</li>
<li class="accordeon__row-item">
<div class="accordeon__row-value">
1 min
</div>
<div class="accordeon__row-value">
Supermarket
</div>
</li>
</ul>
</div>
<div class="accordeon__row">
<div class="accordeon__row-label">
Mobility
</div>
<ul class="accordeon__row-content">
<li class="accordeon__row-item">
<div class="accordeon__row-value">
1 min
</div>
<div class="accordeon__row-value">
Supermarket
</div>
</li>
<li class="accordeon__row-item">
<div class="accordeon__row-value">
1 min
</div>
<div class="accordeon__row-value">
Supermarket
</div>
</li>
</ul>
</div>
<div class="accordeon__row">
<div class="accordeon__row-label">
Schools
</div>
<ul class="accordeon__row-content">
<li class="accordeon__row-item">
<div class="accordeon__row-value">
1 min
</div>
<div class="accordeon__row-value">
Akademisches Gymnasium Beethovenplatz 1
</div>
</li>
<li class="accordeon__row-item">
<div class="accordeon__row-value">
1 min
</div>
<div class="accordeon__row-value">
Supermarket
</div>
</li>
</ul>
</div>
</div>
最佳答案
您可以添加以下行:
.accordeon__row-content {
...
min-width: 0; /* https://www.w3.org/TR/css-flexbox-1/#min-size-auto */
}
并调整这一行:
.accordeon__row-label {
flex: 0 0 30%; /* fixed width flex item, previously flex-basis: 30%; */
}
<强> codepen
关于css - 嵌套 flex 盒元素中的文本被截断,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41764652/