![上的文本溢出省略号不起作用]( "上的文本溢出省略号不起作用")
本文介绍了flex child 上的文本溢出省略号不起作用的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有带有 flex 的容器.我希望中间的孩子占据整个空间，所以我将它设置为 flex: 1.到目前为止一切顺利.
下一个级别是中间的孩子有 2 个孩子，所以我也想将它设置为 flex(如果你迷路了，直接跳到代码段)，第一个孩子我设置省略号样式.现在，省略号停止工作.
如果你点击按钮，你会看到短文本的一切都很好；
有什么想法吗?
function toggle() {var el = document.querySelector('.el');el.textContent = el.textContent === '短' ?'long long long text' : 'short';}
.wrapper {显示:弹性；宽度:200px；对齐内容:拉伸；填充:5px；最小宽度:0；边框:1px 实心}.wrapper .child2 {弹性增长:1；}.柔性 {显示:弹性；最小宽度:0；}.el {空白:nowrap；溢出:隐藏；文本溢出:省略号；}.child1 {背景:红色；}.child2 {背景:蓝色；}.child3 {背景:绿色；}.wrapper>* {填充:5px；}
<div class="child1">child1</div><div class="child2"><div class="flex"><div class="el">long long long text</div><div>a</div>
<div class="child3">child3</div>
<button onclick="toggle()">切换省略号文本</button>
解决方案
添加 overflow: hidden; 到 .wrapper .child2.
实际上，正如 Mosh Feu 在他的回答中所建议的，min-width: 0 应该也可以跨浏览器工作，并且确实可以跨浏览器，尽管 IE 有问题并且需要 overflow
child2 也需要它的原因，是因为它也是一个弹性项目，而弹性项目的，在这种情况下 min-width，默认为 auto，并且不允许它小于它的内容，因此通过添加 overflow: hidden(或除 visible 之外的任何值)，或 min-width: 0，就让它吧.
function toggle() {var el = document.querySelector('.el');el.textContent = el.textContent === '短' ?'long long long text' : 'short';}
.wrapper {显示:弹性；宽度:200px；对齐内容:拉伸；填充:5px；最小宽度:0；边框:1px 实心}.wrapper .child2 {弹性增长:1；溢出:隐藏；}.柔性 {显示:弹性；最小宽度:0；}.el {空白:nowrap；溢出:隐藏；文本溢出:省略号；}.child1 {背景:红色；}.child2 {背景:浅蓝色；}.child3 {背景:绿色；}.wrapper>* {填充:5px；}
<div class="child1">child1</div><div class="child2"><div class="flex"><div class="el">long long long text</div><div>a</div>
<div class="child3">child3</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 child 上的文本溢出省略号不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！