html - 嵌套 flex 的 iOS Safari 文本截断问题

Question

我有带有 display:flex 的 ul 元素和带有 display:flex 的 li 元素内的 anchor ，但是当宽度受限时， anchor 中的文本会被截断。 测试用例: http://jsfiddle.net/ypfcjfk8/4/

HTML 和 CSS 标记 家 入门 长标签长标签长标签长标签 联系我们 支持 家 入门 长标签长标签长标签长标签 联系我们 支持

.list-element {
    display: flex;
    flex-direction: row;
    min-height: 2.71429rem;
}
.list-item-element {
    display: block;
    flex: 1 1 auto;
    padding: 10px;
}
.list-item-content {
    display: flex;
    flex: 1 1 auto;
}
.list-item-label {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
#test {
    width: 300px;
    overflow: hidden;
    border: 1px solid red;
}

预期行为:它应该截断整个列表而不是单个元素。

预期输出截图:

这在 ie 11 和 Firefox、chrome 上工作正常，但在 safari 上不行。任何帮助深表感谢。提前致谢。

Answer 1

您必须为所有浏览器使用适当的 flex 声明。以下代码块使您的 fiddle 在我的 Safari (win8) 中看起来不错。

  display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
  display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
  display: -ms-flexbox;      /* TWEENER - IE 10 */
  display: -webkit-flex;     /* NEW - Chrome */
  display: flex;

查看此页面:https://css-tricks.com/using-flexbox/