flex小孩不工作的文本溢出省略号 [英] text-overflow ellipsis on flex child not working
问题描述
我有 flex
的容器。我想中间的孩子将采取整个空间,所以我把它设置 flex:1
。到目前为止这样好。
下一个级别是中间的孩子有2个孩子,所以我想设置它flex(如果你失去了我,只是跳到片段)和第一个孩子我设置省略号样式。现在,省略号停止工作。
如果您点击按钮,您将看到所有文字都很好;
有什么想法?
function toggle(){var el = document.querySelector('。el'); el.textContent = el.textContent ==='short'? 'long long long text':'short';} .wrapper {display:flex;宽度:200px; align-content:stretch;填充:5px;最小宽度:0; border:1px solid} .wrapper .child2 {flex-grow:1;}。flex {display:flex; min-width:0;}。el {white-space:nowrap;溢出:隐藏; {} {padding:5px;}
pre> < div class =wrapper> < div class =child1> child1< / div> < div class =child2> < div class =flex> < div class =el> long long long text< / div> < DIV>一种与LT; / DIV> < / DIV> < / DIV> < div class =child3> child3< / div>< / div>< button onclick =toggle()>切换省略号文字< / button>
$ p 添加 overflow:hidden;
到 .wrapper .child2
。
其实,中,Mush Feu建议, min-width:0
也应该可以工作,虽然IE是bug,并且需要 overflow
原因还有 child2
需要它,因为它也是一个flex项目,flex项目,在这种情况下 min-width
,默认为 auto code>,并且不允许它小于它的内容,所以通过添加
overflow:hidden
(或者任何值,但是可见),或
min-width:0
,将会让它。
function toggle(){var el = document.querySelector('。el'); el.textContent = el.textContent ==='short'? 'long long long text':'short';} .wrapper {display:flex;宽度:200px; align-content:stretch;填充:5px;最小宽度:0; border:1px solid} .wrapper .child2 {flex-grow:1; overflow:hidden;}。flex {display:flex; min-width:0;}。el {white-space:nowrap;溢出:隐藏; {} {padding:5px;}
pre> < div class =wrapper> < div class =child1> child1< / div> < div class =child2> < div class =flex> < div class =el> long long long text< / div> < DIV>一种与LT; / DIV> < / DIV> < / DIV> < div class =child3> child3< / div>< / div>< button onclick =toggle()>切换省略号文字< / button>
I have container with flex
. I want the middle child will take the entire space so I set it flex: 1
. So far so good.
The next level is that the middle child has 2 child so I want to set it flex too (If you lost me, just skip to the snippet) and the first child I set ellipsis styles. Now, the ellipsis stops working.
If you will click on the button, you will see that everything good with short text;
Any ideas?
function toggle() {
var el = document.querySelector('.el');
el.textContent = el.textContent === 'short' ? 'long long long text' : 'short';
}
.wrapper {
display: flex;
width: 200px;
align-content: stretch;
padding: 5px;
min-width: 0;
border: 1px solid
}
.wrapper .child2 {
flex-grow: 1;
}
.flex {
display: flex;
min-width: 0;
}
.el {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.child1 {
background: red;
}
.child2 {
background: blue;
}
.child3 {
background: green;
}
.wrapper>* {
padding: 5px;
}
<div class="wrapper">
<div class="child1">child1</div>
<div class="child2">
<div class="flex">
<div class="el">long long long text</div>
<div>a</div>
</div>
</div>
<div class="child3">child3</div>
</div>
<button onclick="toggle()">Toggle ellipsis text</button>
Add overflow: hidden;
to .wrapper .child2
.
Actually, as Mosh Feu suggests in his answer, min-width: 0
should also work, and does, cross browser, though IE is buggy and need overflow
The reason also the child2
need it, is because it is also a flex item, and flex item's, in this case min-width
, defaults to auto
, and won't allow it to be smaller than its content, so by adding overflow: hidden
(or any value but visible
), or min-width: 0
, will let it.
function toggle() {
var el = document.querySelector('.el');
el.textContent = el.textContent === 'short' ? 'long long long text' : 'short';
}
.wrapper {
display: flex;
width: 200px;
align-content: stretch;
padding: 5px;
min-width: 0;
border: 1px solid
}
.wrapper .child2 {
flex-grow: 1;
overflow: hidden;
}
.flex {
display: flex;
min-width: 0;
}
.el {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.child1 {
background: red;
}
.child2 {
background: lightblue;
}
.child3 {
background: green;
}
.wrapper>* {
padding: 5px;
}
<div class="wrapper">
<div class="child1">child1</div>
<div class="child2">
<div class="flex">
<div class="el">long long long text</div>
<div>a</div>
</div>
</div>
<div class="child3">child3</div>
</div>
<button onclick="toggle()">Toggle ellipsis text</button>
这篇关于flex小孩不工作的文本溢出省略号的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!