text-overflow 省略号在嵌套的 flexbox 中不起作用

Question

我有一个 two-column 使用 flexbox 创建的布局。

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

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

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

最后，我希望文本具有 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>

但是，当 header 未嵌套在弹性框内时，完全相同的代码可以工作：

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

的值：

white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;

仅当您的元素的内容超过其宽度时才会起作用。

可以设置.header .content的宽度：

.header .content {
    width: 50%;
}

它会如您所愿地工作：
http://jsfiddle.net/t82pqks4/

Answer 2

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

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

div.right 是主容器中的弹性项目 (.container)。

默认情况下，。弹性项目的初始设置是 min-width: auto.

这意味着您的文本长度（不换行）将为父弹性项目设置最小尺寸。使弹性项目能够缩小超过其内容的一种方法是将弹性项目设置为 min-width: 0.

您已经为 .content 弹性项目完成了此操作，但还需要在 .right 项目上进行设置。
您已将 .content 元素设置为 flex: 0 1 auto。

这告诉弹性项目使用内容的大小 (flex-basis: auto)。文字设置大小。

相反，将宽度设置为 0 并根据需要让 flex 容器分布 space。 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

Answer 3

我希望这个解决方案对其他人有所帮助，因为我发现我的页面是一个巨大的 flexbox 嵌套组合，所以我发现其他任何东西都不起作用。所以 min-width 0 没有用，除了这个我试过的都没有用。

在包含您要包装的副本的弹性列中，您需要执行此操作。

.row {
  display: flex;
}

.col1 {
 position: relative;
 flex: 1 1 70%;
 overflow: hidden;
}

.nested {
  width: 100%;
  position: absolute;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.col2 {
  flex: 1 1 30%;
  padding-left: 1rem;
}

<div class="row">
  <div class="col1">
     <div class="nested">This is my really long copy that will push it out of the screen, and will not respect the elippse no matter what I do!!!</div>
  </div>
  <div class="col2">
    Last Text
  </div>
</div>

text-overflow 省略号在嵌套的 flexbox 中不起作用

text-overflow ellipsis not working in nested flexbox

html

css

flexbox

ellipsis