flexbox容器中的省略号[重复]

Posted 2023-03-06

【中文标题】flexbox容器中的省略号[重复]

【英文标题】：Ellipsis in flexbox container [duplicate]

【发布时间】：2014-12-15 10:35:07

【问题描述】：

自从最新 (?) 版本的 Firefox Nightly (35.0a1) 以来，我一直在使用 flex-direction: row 的 flexbox 容器中遇到 text-overflow: ellipsis 的问题，每列的宽度为 50%。

演示：

.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>

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

【问题讨论】：

在 webkist 上看起来不错，但如果您需要跨浏览器工作的解决方案，请考虑使用 JS 解决方案，例如 dotdotdot.frebsite.nl

这个问题已被标记为重复，但重复的是什么？我相信是this one，但我发现当前线程更易于阅读。

在.column 选择器上添加overflow: hidden; 将使其正常工作。

【参考方案1】：

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

可以在here 找到更全面的答案。注意：

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

可行的解决方案：

.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>

【讨论】：

非常感谢！！！