Question

我有一个300px宽的容器，里面有两个弯曲的div 第二个是100px宽，另一个应占用剩余空间当我在第一个div中放置比剩余的200px宽的文本时，它会溢出，当文本溢出时，我可以使用overflow: hidden和text-overflow: ellipsis添加...。当我在第一个div中添加h1标记并添加overflow和text-overflow时，应该会产生相同的效果。
它确实（在Chrome中），但在IE和Firefox中，div变大了，省略号也不起作用。
当我删除其他h1图层并相应地更新css时，所描述的行为按预期工作。

或者查看我的JSFiddle

＆＃13;

body{
    display: flex;
}

#container{
    display: flex;
    flex-basis: 300px;
    overflow: hidden;
}

#content{
    display: block;
    height: 300px;
    background-color: red;
    flex-grow: 1;
    flex-shrink: 1;
}

h1, h2{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


#menu{
    display: flex;
    flex-grow: 0;
    height: 300px;
    background-color: blue;
    flex-shrink: 0;
}

＆＃13;

<div id="container">
    <div id="content">
        <h1>HEADER1 HEADER1 HEADER1 HEADER1 HEADER1 HEADER1 HEADER1<h1>
    </div>
    <div id="menu">xcvcxcxvcvxcvzxczxczgd</div>
</div>

＆＃13;

Answer 1

添加：

#content {
  min-width: 0;
}

＆＃13;

body{
  display: flex;
}
#container{
  display: flex;
  flex-basis: 300px;
  overflow: hidden;
}
#content{
  display: block;
  height: 300px;
  background-color: red;
  flex-grow: 1;
  flex-shrink: 1;
  min-width: 0;
}
h1, h2{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#menu{
  display: flex;
  flex-grow: 0;
  height: 300px;
  background-color: blue;
  flex-shrink: 0;
}

＆＃13;

<div id="container">
  <div id="content">
    <h1>HEADER1 HEADER1 HEADER1 HEADER1 HEADER1 HEADER1 HEADER1</h1>
  </div>
  <div id="menu">xcvcxcxvcvxcvzxczxczgd</div>
</div>

＆＃13;

您需要它，因为Flexbox模块更改了min-width的初始值：

4.5 Implied Minimum Size of Flex Items

为flex items提供更合理的默认最小尺寸，   本规范引入了一个新的auto值作为初始值   中定义的min-width和min-height属性的值   CSS 2.1。

Answer 2

Your problem here is with the content div, the display: block; property seems to be eliminating the effect of flex display in IE, when I changed it to display: flex; it worked.

It seems also that the content is getting overflown relative to the body which is also in display:flex due to the flex-basis: 300px; in the container, and the h1 element relative to the #content element is not being overflown that's why the ellipsis doesn't work.

Seems to work on firefox version 29.0, please note that the flex behavior is fully suuported starting from firefox 28+,

check http://caniuse.com/#feat=flexbox for more info

enter image description here

文本溢出与flexbox组合不起作用

2 个答案: