Question

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

HTML＆amp; CSS标记家入门 Long LabelLong LabelLong LabelLong Label 联系我们支持家入门 Long LabelLong LabelLong LabelLong Label 联系我们支持

.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声明。下面的代码块使我的小提琴看起来很好用我的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/

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

1 个答案: