[英]CSS ellipsis inside flex item
I have a layout based on flexbox.我有一个基于 flexbox 的布局。 Two columns, one fixed size and the second need to take the rest space.
两列,一个固定大小,第二个需要占用剩余空间。 In the grow column I have a string that I want it to be clipped.
在增长列中,我有一个字符串,我希望它被剪裁。
In Chrome it works fine.在 Chrome 中它工作正常。 But it doesn't work in Firefox and IE.
但它在 Firefox 和 IE 中不起作用。 I tried to fix it by giving the grow (flex item) inner element a width by using relative and absolute positions, but then I got a corrupt layout.
我试图通过使用相对和绝对位置给增长(弹性项目)内部元素一个宽度来修复它,但后来我得到了一个损坏的布局。 The corruption is related that the element's height doesn't take in account to all its child elements.
损坏与元素的高度没有考虑到它的所有子元素有关。
Note: the inner element inside the flex grow item is built with several div tags.注意:flex 增长项内的内部元素是用几个div标签构建的。
Here is the jsFiddle .这是jsFiddle 。
.cols { display: flex; } .flex--0 { flex: 0 0 auto; } .flex--1 { flex: 1 1 auto; } .absolute { position: absolute; } .relative { position: relative; } .width--100 { width: 100%; } .ellipsis { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } .border { border: 1px solid gray; }
<h1>Ellipsis inside Flex item</h1> <h2>Working fine in Chrome Not working in FF and IE</h2> <div class="cols border"> <div class="flex--0 border padding--sm">Icon</div> <div class="flex--1 border padding--sm"> <div class="ellipsis">Icon lkdjasdoif dlkjasdfo;isd fasldf ;asofj as;doifja dflkas d;laiksjdf oaisjdf asldkfj a;slkfdj as;oifj as;ldkfj asldkfjowiejfa;wlkdfj as;lkdjf as;lkdfj a;osifj aw;lkefj asldkfj ;aolifj aw;oiefjasl;dkfj a;slkdfj aodfj aw;lfjk as;lkdfj a;oiwefjr</div> <div>Icon</div> <div>Icon</div> <div>Icon</div> </div> </div> <div>Second BLOCK</div> <h2>Trying to fix in FF and IE (Layout corrupts)</h2> <div class="cols border"> <div class="flex--0 border padding--sm">Icon</div> <div class="flex--1 relative border padding--sm"> <div class="absolute width--100"> <div class="ellipsis">Icon lkdjasdoif dlkjasdfo;isd fasldf ;asofj as;doifja dflkas d;laiksjdf oaisjdf asldkfj a;slkfdj as;oifj as;ldkfj asldkfjowiejfa;wlkdfj as;lkdjf as;lkdfj a;osifj aw;lkefj asldkfj ;aolifj aw;oiefjasl;dkfj a;slkdfj aodfj aw;lfjk as;lkdfj a;oiwefjr</div> <div>Icon</div> <div>Icon</div> <div>Icon</div> </div> </div> </div> <div>Second BLOCK</div>
You can add min-width: 0;
您可以添加
min-width: 0;
to the flex item.到弹性项目。
.flex--1 {
flex: 1 1 auto;
min-width: 0;
}
Or add overflow: hidden;
或者添加
overflow: hidden;
to it.到它。
.flex--1 {
flex: 1 1 auto;
overflow: hidden; /*or auto*/
}
Why?为什么?
4.5.
4.5. Implied Minimum Size of Flex Items
Flex 项目的隐含最小尺寸
To provide a more reasonable default minimum size for flex items, this specification introduces a new
auto
value as the initial value of themin-width
andmin-height
properties defined in CSS 2.1.为了为弹性项目提供更合理的默认最小尺寸,本规范引入了一个新的
auto
值作为 CSS 2.1 中定义的min-width
和min-height
属性的初始值。
Alternatively, you can wrap the content into a container.或者,您可以将内容包装到容器中。
.container {
display: table;
table-layout: fixed;
width: 100%;
}
.ellipsis {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.