我有一个用flexBoxes创建的两列布局.
在标题中我有三列,一个按钮,一些文本和一个按钮.
我希望按钮位于列的左侧和右侧,文本占用任何额外的空间.
最后,我希望文本有空格：nowrap和文本溢出：省略号属性来截断长标题.
我的问题是：我无法让文本包装在嵌套在另一个flexBox中的flexBox中正常工作,如下所示：
http://jsfiddle.net/maxmumford/rb4sk3mz/3/
.container {
display: flex;
height: 100vh;
}
.left {
width: 200px;
background-color: yellow;
}
.right {
flex: 1;
background-color: blue;
color: white;
}
.header {
background: red;
color: white;
display: flex;
flex-direction: row;
}
.header .content {
white-space: nowrap;
flex: 0 1 auto;
text-overflow: ellipsis;
overflow: hidden;
min-width: 0;
}
.header .buttons {
background: green;
flex: 1 0 auto;
}
.header .content:hover {
white-space: normal;
}
<div class="container">
<div class="left">
content left
</div>
<div class="right">
<div class="header">
<div class="buttons">buttons</div>
<div class="content">
This content is really long and should wrap with ellipses,but for some reason it doesn't work when it's nested in a container with display: flex
</div>
<div class="buttons">buttons</div>
</div>
content right
</div>
</div>
但是,当标题未嵌套在弹性框中时,完全相同的代码可以正常工作：
http://jsfiddle.net/maxmumford/p7115f2v/1/
.header {
background: red;
color: white;
display: flex;
flex-direction: row;
}
.header .content {
white-space: nowrap;
flex: 0 1 auto;
text-overflow: ellipsis;
overflow: hidden;
min-width: 0;
}
.header .buttons {
background: green;
flex: 1 0 auto;
}
<div class="header">
<div class="buttons">buttons</div>
<div class="content">
This content is really long and is wrapped correctly... This content is really long and is wrapped correctly... This content is really long and is wrapped correctly... This content is really long and is wrapped correctly... This content is really long
and is wrapped correctly... This content is really long and is wrapped correctly... This content is really long and is wrapped correctly...
</div>
<div class="buttons">buttons</div>
</div>
如何在第一个小提琴中实现我想要的东西？
谢谢
解决方法
您的代码中有两个问题阻止了省略号的工作：
> div.right包含div.header,后者又包含按钮和文本.
div.right是主容器(.container)中的flex项.
默认情况下,a flex item cannot be smaller than the size of its content.弹性项目的初始设置为min-width：auto.
这意味着文本的长度(不包装)将为父Flex项目设置最小大小.使flex项目缩小其内容的一种方法是将flex项目设置为min-width：0.
您已经为.content flex项目完成了此操作,但它也需要在.right项目上设置.
>您已将.content元素设置为flex：0 1 auto.
这告诉flex项目使用内容的大小(flex-basis：auto).文本设置大小.
而是将宽度设置为0,并根据需要让flex容器分配空间. You can do this with flex: 1 1 0,which is the same as flex: 1.
.container {
display: flex;
height: 100vh;
}
.left {
width: 200px;
background-color: yellow;
}
.right {
flex: 1;
background-color: blue;
color: white;
min-width: 0; /* NEW */
}
.header {
background: red;
color: white;
display: flex;
flex-direction: row;
}
.header .content {
white-space: nowrap;
flex: 1; /* ADJUSTMENT */
text-overflow: ellipsis;
overflow: hidden;
min-width: 0;
}
.header .buttons {
background: green;
flex: 1 0 auto;
}
.header .content:hover {
white-space: normal;
}
<div class="container">
<div class="left">
content left
</div>
<div class="right">
<div class="header">
<div class="buttons">buttons</div>
<div class="content">
This content is really long and should wrap with ellipses,but for some reason it doesn't work when it's nested in a container with display: flex
</div>
<div class="buttons">buttons</div>
</div>
content right
</div>
</div>
