Question

以下演示（作为SO answer提交）演示了省略号在flexbox布局中的用法。但是，它似乎无法在移动Safari上使用-文本根本不会缩短（在iPhone 5，iPhone X和XCode的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>

这是一个已知问题吗？

Answer 1

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

尽管使用flex时，不建议设置'width'。我刚刚在'text-div'类中添加了flex-basis: 40%;，可以看到截断的情况。

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

1 个答案: