CSS flexbox 容器中的省略号

Ellipsis in flexbox container

提问by jdlm

Since the latest (?) release of Firefox Nightly (35.0a1) I've been experiencing an issue with text-overflow: ellipsisinside a flexbox container with flex-direction: row, with each column being 50% wide.

自从 Firefox Nightly (35.0a1) 的最新 (?) 发布以来，我在text-overflow: ellipsisflexbox 容器内部遇到了一个问题flex-direction: row，每列的宽度为 50%。

Demo:

演示：

.container {
  width: 300px;
  background: red;
}

.row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.column {
  flex-basis: 50%;
}

.column p {
  background: gold;
  
  /* Will not work in Firefox Nightly 35.0a1 */
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

<div class="container">
  <div class="row">
    <div class="column">
      <p>Captain's Log, Stardate 9529.1: This is the final cruise of the starship Enterprise under my command. This ship and her history will shortly become the care of another crew. To them and their posterity will we commit our future. They will continue the voyages we have begun and journey to all the undiscovered countries boldly going where no man, where no one has gone before.</p>
    </div>
    <div class="column">
      <p>Captain's Log, Stardate 9529.1: This is the final cruise of the starship Enterprise under my command. This ship and her history will shortly become the care of another crew. To them and their posterity will we commit our future. They will continue the voyages we have begun and journey to all the undiscovered countries boldly going where no man, where no one has gone before.</p>
    </div>
  </div>
</div>

In Nightly the text will leak outside its container, and not append the ...at the end. In Chrome and Firefox Stable it works as intended.

在 Nightly 中，文本将泄漏到其容器之外，并且不会...在末尾附加。在 Chrome 和 Firefox Stable 中，它按预期工作。

回答by jdlm

This was eventually tracked down to recent changes in Firefox Nightly. Long story short, setting min-width: 0on the .columnselector will make it work as expected.

这最终被追溯到 Firefox Nightly 最近的变化。长话短说，选择器min-width: 0上的设置.column将使其按预期工作。

A more comprehensive answer can be found here. Of note:

可以在此处找到更全面的答案。值得注意的是：

"Basically: flex items will refuse to shrink below their minimum intrinsic width, unless you explicitly specify "min-width" or "width" or "max-width" on them."

“基本上：弹性项目将拒绝缩小到其最小固有宽度以下，除非您在它们上明确指定“最小宽度”或“宽度”或“最大宽度”。”

The working solution:

工作解决方案：

.container {
  width: 300px;
  background: red;
}

.row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.column {
  /* This will make it work in Firefox >= 35.0a1 */
  min-width: 0;
  flex-basis: 50%;
}

.column p {
  background: gold;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

<div class="container">
  <div class="row">
    <div class="column">
      <p>Captain's Log, Stardate 9529.1: This is the final cruise of the starship Enterprise under my command. This ship and her history will shortly become the care of another crew. To them and their posterity will we commit our future. They will continue the voyages we have begun and journey to all the undiscovered countries boldly going where no man, where no one has gone before.</p>
    </div>
    <div class="column">
      <p>Captain's Log, Stardate 9529.1: This is the final cruise of the starship Enterprise under my command. This ship and her history will shortly become the care of another crew. To them and their posterity will we commit our future. They will continue the voyages we have begun and journey to all the undiscovered countries boldly going where no man, where no one has gone before.</p>
    </div>
  </div>
</div>