CSS：中间使用 flexbox 省略号，在 safari 中中断

Posted 2023-03-05

【中文标题】CSS：中间使用 flexbox 省略号，在 safari 中中断

【英文标题】：CSS: ellipsis in middle using flexbox, breaks in safari

【发布时间】：2016-10-18 15:34:05

【问题描述】：

我正在尝试使用 flexbox 而不是浮动在两段内容之间创建省略号。我需要的效果可能永远不会与花车一起使用。

第一个“列”包含的信息不如第二列重要，因此应该先截断第二列中的任何内容。

此效果在 Chrome 和 FireFox 中运行良好，但在 Safari 中失败。

根据caniuse，我使用的是正确版本的 Safari，这表明完全支持 flexbox。

对于实时版本和我想要实现的精简版本：

.parent 
  background-color: lightgrey;
  padding: 10px 0;
  display: flex;
  max-width: 410px;
  margin-bottom: 2px;

.less-important 
  background-color: lightpink;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0 5px;

.more-important 
  background-color: lightgreen;
  white-space: nowrap;
  padding: 0 5px;

<div class="parent">
  <div class="less-important">Truncate this text because it is less important</div>
  <div class="more-important">The important text</div>
</div>

<div class="parent">
  <div class="less-important">No ellipsis</div>
  <div class="more-important">Important stuff</div>
</div>

<div class="parent">
  <div class="less-important">Less important content</div>
  <div class="more-important">Way more important info that will cause ellipsis</div>
</div>

---

这是 Safari 中发生的情况的屏幕截图：

我怎样才能让它在 Safari 中正常工作？

【参考方案1】：

我通过为.less-important 和.more-important 指定flex: 属性使其工作：

.parent 
  background-color: lightgrey;
  padding: 10px 0;
  display: flex;
  max-width: 410px;
  margin-bottom: 2px;

.less-important 
  background-color: lightpink;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0 5px;
  flex: 0 1 auto;

.more-important 
  background-color: lightgreen;
  white-space: nowrap;
  padding: 0 5px;
  flex: 0 0 auto;

<div class="parent">
  <div class="less-important">Truncate this text because it is less important</div>
  <div class="more-important">The important text</div>
</div>

<div class="parent">
  <div class="less-important">No ellipsis</div>
  <div class="more-important">Important stuff</div>
</div>

<div class="parent">
  <div class="less-important">Less important content</div>
  <div class="more-important">Way more important info that will cause ellipsis</div>
</div>

【讨论】：

为此我整天都在把脸砸在桌子上......我想知道是否只需要明确告知 Safari。无论哪种方式，这都很棒。谢谢。

Flexbox 可能真的很挑剔——尤其是“默认行为”——从浏览器到浏览器。如果您还没有，我强烈建议您收藏github.com/philipwalton/flexbugs

感谢您的资源！很有帮助。

太棒了，fwiw，添加text-direction: ltr 可以看到.more-important 的结尾而不是开头。