Flexbox不能在桌子里面工作？ [英] Flexbox not working inside table?
问题描述
我使用flexbox在一个窄列中显示一个文本标签和一个数字值，所以如果文本不合适，文本会被省略号截断。
它工作得很好，直到我需要将整个列放在一个表格单元格中 - 此时浏览器（Chrome）忽略了列宽，并使表格足够宽以适应所有文本。 p>
以下是标签布局：
$ b
< ; div class =line>
< span>很长的标签文字< / span>
< span> 12345< / span>
< / div>
.line {
display：flex;
宽度：100％;
}
.line span：first-child {
white-space：nowrap;
flex-grow：1;
overflow：hidden;
文本溢出：省略号;
}
.line span：last-child {
flex-shrink：0;
margin-left：5px;
$ b $ p
将它放在一个固定宽度的普通div中就可以正常工作。把它放在一个表格单元中不会：
小提琴： http：// jsfiddle。 net / 98o7m7am /
$ b .wrapper {width：150px;}。table {display：table;}。table> div {display：table-cell;}。line {display：flex; width：100％;}。line span：first-child {white-space：nowrap; flex-grow：1;溢出：隐藏; text-overflow：ellipsis;}。line span：last-child {flex-shrink：0; margin-left：5px;}
< div class = 包装 > < div class =line> < span>非常长的标签文字< / span> <跨度> 12345< /跨度> < / div>< / div>< div class =table wrapper> < DIV> < div class =line> < span>非常长的标签文字< / span> <跨度> 12345< /跨度> < / DIV> < / div>< / div>
更新：我最终通过使用更多的flexbox而不是表格来解决这个问题，但是我仍然想知道为什么最初的例子不起作用。
这是因为，默认情况下，表使用自动表格布局：
CSS 2.1规范没有定义布局模式，但提出了一个反映行为的（非规范的）算法。一些流行的HTML用户代理。
根据该算法，表格的宽度只会被视为最小宽度，真正的宽度将足以使内容不会溢出：
lockquote
计算每个单元格的最小内容宽度（MCW） ：格式化的
内容可以包含任意数量的行，但不能溢出单元格
框。
由于您有 white-space：nowrap ，MCW将会是为避免这种情况，您可以将第一个跨度的初始宽度设置为0：
.line span：first-child {
width：0;
$ b
.wrapper {width： 150px;}。table {display：table;}。table> div {display：table-cell;}。line {display：flex; width：100％;}。line span：first-child {width：0;白色空间：nowrap; flex-grow：1;溢出：隐藏; text-overflow：ellipsis;}。line span：last-child {flex-shrink：0; margin-left：5px;}
< div class = 包装 > < div class =line> < span>非常长的标签文字< / span> <跨度> 12345< /跨度> < / div>< / div>< div class =table wrapper> < DIV> < div class =line> < span>非常长的标签文字< / span> <跨度> 12345< /跨度> < / DIV> < / div>< / div>
可能要尝试在规范中正确定义的固定表格模式 （因此更可靠），通常更快，也解决了这个问题。
$ b 布局：固定;
.wrapper {width：150px;}。 {display：table; table-layout：fixed;}。table> div {display：table-cell;}。line {display：flex; width：100％;}。line span：first-child {white-space：nowrap; flex-grow：1;溢出：隐藏; text-overflow：ellipsis;}。line span：last-child {flex-shrink：0; margin-left：5px;}
< div class = 包装 > < div class =line> < span>非常长的标签文字< / span> <跨度> 12345< /跨度> < / div>< / div>< div class =table wrapper> < DIV> < div class =line> < span>非常长的标签文字< / span> <跨度> 12345< /跨度> < / DIV> < / div>< / div>
I'm using flexbox to display a text label along with a numeric value in a narrow column, so that the text is truncated with ellipsis if it doesn't fit.
It worked fine, until I had the need to place the entire column in a table-cell - at which point the browser (Chrome) just ignored the column width and made the table wide enough to fit all the text.
Here's the label layout:
<div class="line">
<span>Very long label text</span>
<span>12345</span>
</div>
.line {
display: flex;
width: 100%;
}
.line span:first-child {
white-space: nowrap;
flex-grow: 1;
overflow: hidden;
text-overflow: ellipsis;
}
.line span:last-child {
flex-shrink: 0;
margin-left: 5px;
}
Placing it in a regular div with a fixed width works as expected. Placing it in a table-cell doesn't:
Fiddle: http://jsfiddle.net/98o7m7am/
.wrapper {
width: 150px;
}
.table {
display: table;
}
.table > div {
display: table-cell;
}
.line {
display: flex;
width: 100%;
}
.line span:first-child {
white-space: nowrap;
flex-grow: 1;
overflow: hidden;
text-overflow: ellipsis;
}
.line span:last-child {
flex-shrink: 0;
margin-left: 5px;
}
<div class="wrapper">
<div class="line">
<span>Very long label text</span>
<span>12345</span>
</div>
</div>
<div class="table wrapper">
<div>
<div class="line">
<span>Very long label text</span>
<span>12345</span>
</div>
</div>
</div>
Update: I ended up 'solving' this by using more flexboxes instead of tables, but I would still like to know why the original example doesn't work.
解决方案 That's because, by default, tables use the automatic table layout:
The CSS 2.1 spec doesn't define that layout mode, but suggests a (non-normative) algorithm, which reflects the behavior of several popular HTML user agents.
According to that algorithm, the table's width will only be treated like a minimum width, and the real width will be enough so that the content does not overflow:
Calculate the minimum content width (MCW) of each cell: the formatted
content may span any number of lines but may not overflow the cell
box.
Since you have white-space: nowrap, the MCW will be the width of the full text.
To avoid that, you can set the initial width of your first span to 0:
.line span:first-child {
width: 0;
}
.wrapper {
width: 150px;
}
.table {
display: table;
}
.table > div {
display: table-cell;
}
.line {
display: flex;
width: 100%;
}
.line span:first-child {
width: 0;
white-space: nowrap;
flex-grow: 1;
overflow: hidden;
text-overflow: ellipsis;
}
.line span:last-child {
flex-shrink: 0;
margin-left: 5px;
}
<div class="wrapper">
<div class="line">
<span>Very long label text</span>
<span>12345</span>
</div>
</div>
<div class="table wrapper">
<div>
<div class="line">
<span>Very long label text</span>
<span>12345</span>
</div>
</div>
</div>
Alternatively, you may want to try the fixed table mode, which is properly defined in the spec (and thus more reliable), is usually faster, and solves the problem too.
table-layout: fixed;
.wrapper {
width: 150px;
}
.table {
display: table;
table-layout: fixed;
}
.table > div {
display: table-cell;
}
.line {
display: flex;
width: 100%;
}
.line span:first-child {
white-space: nowrap;
flex-grow: 1;
overflow: hidden;
text-overflow: ellipsis;
}
.line span:last-child {
flex-shrink: 0;
margin-left: 5px;
}
<div class="wrapper">
<div class="line">
<span>Very long label text</span>
<span>12345</span>
</div>
</div>
<div class="table wrapper">
<div>
<div class="line">
<span>Very long label text</span>
<span>12345</span>
</div>
</div>
</div>
这篇关于Flexbox不能在桌子里面工作？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
