与flexbox结合使用的文本溢出不起作用[重复]

Posted 2023-03-05

【中文标题】与flexbox结合使用的文本溢出不起作用[重复]

【英文标题】：text-overflow in combination with flexbox not working [duplicate]

【发布时间】：2015-09-13 04:32:05

【问题描述】：

我有一个 300 像素宽的容器，里面有两个弯曲的 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>

【问题讨论】：

在我的 chrome 中它是并排的，但在 ie 中它在顶部你认为它与问题有关你解决了吗？

其实还不算过分。在 FF 和 IE 中，蓝色条实际上是 0px 宽。省略号不起作用，因为 h1 实际上没有溢出，容器正在溢出（溢出隐藏）。只有 Chrome 遵守容器的设置弹性基础和菜单的弹性增长。无论flex-shrink: 0如何，FF 和 IE 都会缩小菜单

为什么不以 % 为单位设置宽度？？

更新了jsFiddle 如果这对你有用，记得对浮动元素使用clearfix

@Enrico 感谢您的提琴，但是我被禁止使用浮点数（要求）。另外我不使用百分比，因为在我的完整应用程序中，菜单是固定的像素，内容应该占据左边的宽度。

【参考方案1】：

添加这个：

#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

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

【讨论】：

感谢您引用 W3。这消除了官方消息来源的混乱。

【参考方案2】：

您的问题在于内容 div，即 display: block;属性似乎正在消除 IE 中 flex 显示的效果，当我将其更改为 display: flex;成功了。

由于 flex-basis: 300px; ，内容似乎也相对于 display:flex 中的 body 溢出了；在容器中，并且相对于 #content 元素的 h1 元素没有被溢出，这就是省略号不起作用的原因。

似乎可以在 firefox 29.0 版上运行，请注意，从 firefox 28+ 开始完全支持 flex 行为，

查看http://caniuse.com/#feat=flexbox了解更多信息

【讨论】：

感谢您的回答，这解决了 IE 中的问题。然而，这个修复并不能解决 FF 的问题。

我运行的是 38.0.5，所以这似乎是介于两者之间。奇怪...

嗯，这很奇怪：s