文本溢出与flexbox结合不起作用 [英] text-overflow in combination with flexbox not working

问题描述

我有一个300px宽的容器，内有两个可弯曲的div。

第二个是100px宽，另一个应该占用剩余空间。

当我放置文本比第一个div中其余的200px宽，它溢出，我可以使用 overflow：hidden 和文本溢出：省略号在文本溢出时添加 ... 。
当我把 h1 标记，并添加溢出和文本溢出应该创建相同的效果。 b $ b它确实（在Chrome中），但在IE和Firefox中，div增长得更大，省略号无效。

当我删除额外的 h1 图层并相应地更新css，所描述的行为按预期工作。

或者看看我的 JSFiddle data-data =falsedata-console =falsedata-babel =false> div class =snippet-code>

body {display：flex;}＃container {display：flex; flex-basis：300px; overflow：hidden;}＃content {display：block;身高：300px;背景颜色：红色; flex-grow：1; flex-shrink：1;} h1，h2 {white-space：nowrap;溢出：隐藏; text-overflow：ellipsis;}＃menu {display：flex; flex-grow：0;身高：300px;背景颜色：蓝色; flex-shrink：0;}

< div id = 容器 > < div id =content> < h1> HEADER1 HEADER1 HEADER1 HEADER1 HEADER1 HEADER1 HEADER1< h1> < / DIV> < div id =menu> xcvcxcxvcvxcvzxczxczgd< / div>< / div>

解决方案

添加这个：



#content {
min-width：0;



$ b

body {display：flex ;}＃container {display：flex; flex-basis：300px; overflow：hidden;}＃content {display：block;身高：300px;背景颜色：红色; flex-grow：1; flex-shrink：1; min-width：0;} h1，h2 {white-space：nowrap;溢出：隐藏; text-overflow：ellipsis;}＃menu {display：flex; flex-grow：0;身高：300px;背景颜色：蓝色; flex-shrink：0;}

< div id = 容器 > < div id =content> < h1> HEADER1 HEADER1 HEADER1 HEADER1 HEADER1 HEADER1 HEADER1< / h1> < / DIV> < div id =menu> xcvcxcxvcvxcvzxczxczgd< / div>< / div>

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



4.5弹性项目的隐含最小大小

要为 flex items ，
这个规范引入了一个新的 auto 值作为值。 html＃propdef-min-width>最小宽度和最小高度
CSS 2.1中定义的属性。




I have a container which is 300px wide with two flexed divs inside.
The second one is 100px wide and the other should take up the remaining space.
When I place text wider than the remaining 200px in the first div, it overflows and I can use overflow: hidden and text-overflow: ellipsis to add the ... when the text overflows.
When I put a h1 tag within the first div and add the overflow and text-overflow should create the same effect.
And it does (in Chrome), but in IE and Firefox the div grows larger and the ellipsis doesn't work.
When I remove the additional h1 layer and update the css accordingly, the described behavior works as expected.

Or look at my 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>

解决方案

Add this:

#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>

You need it because the Flexbox module changed the initial value of 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.

这篇关于文本溢出与flexbox结合不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！