是否可以让 Flexbox 在标签内工作？答案

【问题标题】：Is it possible to get Flexbox to work inside label?是否可以让 Flexbox 在标签内工作？
【发布时间】：2019-02-06 14:50:35
【问题描述】：

我正在使用 flexbox 在窄列中显示文本标签和数值，这样如果文本不合适，就会用省略号截断。

它工作得很好，直到我需要将整个列放在一个表格单元格中 - 此时浏览器 (Chrome) 只是忽略了列宽并使表格足够宽以容纳所有文本。

这是标签布局：

<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 中可以按预期工作。将其放在表格单元格中不会：

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

更新：我最终通过使用更多 flexbox 而不是表格来“解决”这个问题，但我仍然想知道为什么原始示例不起作用。

【问题讨论】：

标签： html css flexbox

【解决方案1】：

这是因为默认情况下，表格使用automatic table layout：

CSS 2.1 规范没有定义该布局模式，但提出了一种（非规范）算法，它反映了几种流行的 HTML 用户代理的行为。

根据那个算法，表格的width只会被当成最小宽度，实际宽度就足够让内容不溢出了：

计算每个单元格的最小内容宽度（MCW）：格式化的内容可以跨越任意数量的行，但不能溢出单元格盒子。

由于您有white-space: nowrap，因此 MCW 将是全文的宽度。

为避免这种情况，您可以将第一个跨度的初始宽度设置为 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>

或者，您可能想尝试fixed table mode，它在规范中正确定义（因此更可靠），通常更快，也可以解决问题。

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>

【讨论】：