带有省略号的 CSS3 flexbox 布局在移动 Safari 上不起作用答案

【问题标题】：CSS3 flexbox layout with ellipsis doesn't work on mobile Safari带有省略号的 CSS3 flexbox 布局在移动 Safari 上不起作用
【发布时间】：2019-01-16 20:49:12
【问题描述】：

以下演示（以SO answer 提交）说明了省略号与弹性框布局的用法。但是，它似乎不适用于移动 Safari - 文本根本没有缩短（在 XCode 中的 iPhone 5、iPhone X 和 iOS 11.4 模拟器上测试）。它适用于包括 Safari 在内的所有桌面浏览器。

http://jsfiddle.net/Blender/kXMz7/1/

.parent-div {
    display: -webkit-flex;
    display: -moz-flex;
    display: flex;
}

.text-div {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;    
    
    min-width: 0;
}

.icon-div {
    -webkit-flex: 1;
    -moz-flex: 1;
    flex: 1;
}

<div class="parent-div">
  <div class="icon-div">X</div>
  <div class="text-div">This is text I'd like to truncate when space doesn't permit</div>
</div>

这是一个已知问题吗？

【问题讨论】：

我会尝试将该文本放在另一个跨度中，然后将省略号放在跨度上（显示内联块和最大宽度 100%；）

标签： css flexbox mobile-safari

【解决方案1】：

https://www.w3schools.com/css/tryit.asp?filename=trycss3_text-overflow，设置宽度以在给定宽度不够时截断字符。

虽然在使用 flex 时，不推荐设置 'width'。我刚刚在“text-div”类中添加了flex-basis: 40%;，我可以看到截断正在发生。

【讨论】：