html - 文本溢出省略号在嵌套的 flexbox 中不起作用

Question

我有一个使用 flexboxes 创建的两列布局。

在右栏中，我有两行，第一行包含标题，第二行包含页面内容。

在标题中我有三列、一个按钮、一些文本和一个按钮。

我希望按钮位于列的左侧和右侧，文本占据任何额外空间。

最后，我希望文本具有 white-space:nowrap 和 text-overflow:ellipsis 属性以截断长标题。

我的问题是:我无法让嵌套在另一个 flexbox 中的 flexbox 中的文本换行正常工作，如这个 fiddle 所示:

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>

但是，当标题未嵌套在 flexbox 内时，完全相同的代码可以工作:

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>

如何在第一 fiddle 中实现我想要的？

谢谢

Answer 1

您的代码中有两个问题阻止了省略号的工作:

1. div.right 包含 div.header，后者又包含按钮和文本。

   div.right 是主容器 (.container) 中的 flex 元素。

   默认情况下，a flex item cannot be smaller than the size of its content . flex 元素的初始设置是 min-width: auto。

   这意味着您的文本长度(不换行)将为父 flex 元素设置最小尺寸。使 flex 元素能够缩小超过其内容的一种方法是将 flex 元素设置为 min-width: 0。

   您已经为 .content flex 元素完成了此操作，但还需要在 .right 元素上进行设置。

2. 您已将 .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>

revised fiddle