Flex中的CSS省略号 [英] CSS ellipsis inside flex item
问题描述
我有一个基于flexbox的布局。两列,一个固定大小,第二个需要占用休息空间。在增长列中,我有一个字符串,我希望它被剪辑。
I have a layout based on 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.
在Chrome它工作正常。但它不工作在Firefox和IE。我试图通过使用grow(flex item)内部元素的宽度通过使用相对和绝对位置,但是,然后我得到了一个损坏的布局修复它。相关的腐败是元素的高度没有考虑到其所有的子元素。
In Chrome it works fine. But it doesn't work in Firefox and 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.
注意:flex grow项目中的内部元素是建立与几个 div 标记。
Note: the inner element inside the flex grow item is built with several div tags.
以下是 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>
推荐答案
您可以将 min-width:0;
添加到flex项目。
You can add min-width: 0;
to the flex item.
.flex--1 {
flex: 1 1 auto;
min-width: 0;
}
jsFiddle
或添加 overflow:hidden;
到它。
.flex--1 {
flex: 1 1 auto;
overflow: hidden; /*or auto*/
}
jsFiddle
为什么?
为了给flex项目提供更合理的默认最小大小,这个
规范引入了一个新的 auto
值作为
min-width
和 min-height
在CSS 2.1中定义的属性。
To provide a more reasonable default minimum size for flex items, this
specification introduces a new auto
value as the initial value of the
min-width
and min-height
properties defined in CSS 2.1.
内容到容器中。
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;
}
jsFiddle
这篇关于Flex中的CSS省略号的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!