Flexbox是否可以在标签内工作? [英] Is it possible to get Flexbox to work inside label?

问题描述

我正在使用flexbox在窄列中显示文本标签和数值，以便在文本不适合时将其用省略号截断.

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.

一切正常，直到我需要将整个列放在表格单元格中–此时，浏览器(Chrome)才忽略了列宽并使表宽到足以容纳所有文本.

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.

这是标签布局:

<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;
}

将其固定在具有固定宽度的常规div中可以正常工作.将其放置在表格单元中不会:

Placing it in a regular div with a fixed width works as expected. Placing it in a table-cell doesn't:

小提琴: 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:

CSS 2.1规范没有定义该布局模式，但是建议了一种(非规范性的)算法，该算法反映了几种流行的HTML用户代理的行为.

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.

根据该算法，表的width将仅被视为最小宽度，并且实际宽度将足以使内容不会溢出:

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:

计算每个单元格的最小内容宽度(MCW): 内容可能会跨越任意行，但可能不会溢出单元格 框.

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.

由于您拥有white-space: nowrap，因此MCW将为全文的宽度.

Since you have white-space: nowrap, the MCW will be the width of the full text.

为避免这种情况，可以将第一个跨距的初始宽度设置为0:

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屋！