html - 文本溢出与 flexbox 结合不起作用

标签 html css internet-explorer firefox flexbox

<分区>

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

或者看看我的JSFiddle

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;
}

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

最佳答案

添加这个:

#content {
  min-width: 0;
}

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;
}

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

你需要它，因为 Flexbox 模块改变了 min-width 的初始值:

4.5 Implied Minimum Size of Flex Items

To provide a more reasonable default minimum size for flex items, this specification introduces a new auto value as the initial value of the min-width and min-height properties defined in CSS 2.1.

关于html - 文本溢出与 flexbox 结合不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31069474/

上一篇：php - 为什么需要设计 "404 not found"页？

下一篇：jquery - 使用 jQuery 从文件输入中获取 blob 图像

css - 如何在 VM 上运行的 IE8 中添加/编辑 CSS 属性？

javascript - 动态删除html表中的多列

javascript - 响应时导航栏固定在顶部

javascript - 使图像加载更快的 HTML

html - 如何使页脚始终保持在页面底部，即使页面内容小于屏幕？

html - 如何在博主blogspot页面中显示div标签？

css - 等号前的星号 (*=) 是什么意思？感叹号呢？

android - 智能手机上从垂直到横向的布局视觉问题

html - 表的边框在 IE 中不起作用