Question

我使用flexboxes创建了一个双列布局。

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

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

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

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

我的问题是：我无法让文字换行在嵌套在另一个弹箱中的Flexbox中正常工作，如下所示：

http://jsfiddle.net/maxmumford/rb4sk3mz/3/

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

但是，当标题没有嵌套在弹性框中时，完全相同的代码会起作用：

http://jsfiddle.net/maxmumford/p7115f2v/1/

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

如何在第一个小提琴中实现我想要的东西？

由于

Answer 1

您的代码中存在两个问题，导致省略号无效：

div.header包含div.right，其中包含按钮和文字。

.container是主容器中的弹性项目（min-width: auto）。

默认情况下，a flex item cannot be smaller than the size of its content。弹性项目的初始设置为min-width: 0。

这意味着文本的长度（不包装）将为父Flex项目设置最小大小。使弹性项目缩小其内容的一种方法是将弹性项目设置为.content。

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

这告诉flex项目使用内容的大小（.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; }）。文本设置了大小。

相反，将宽度设置为0，并根据需要让flex容器分配空间。 You can do this with flex: 1 1 0, which is the same as flex: 1

＆＃13;

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

＆＃13;

#include <iostream>
using namespace std;

int main() {
   int userNum = 0;
   int i = 0;

   userNum = 3;

       for(i = 1; i <= userNum; i--) {
       cout << i << endl;
       cout << "Blastoff!" << endl;
   }

   return 0;
 }

＆＃13;

revised fiddle

Answer 2

值：

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

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

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

.header .content {
    width: 50%;
}

它会像你期望的那样工作：
http://jsfiddle.net/t82pqks4/

Answer 3

我希望这个解决方案能帮助别人，因为我的页面是一个巨大的 flexbox 嵌套组合。所以 min-width 0 不起作用，除此之外我没有尝试任何工作。

在包含要换行的副本的 flex 列中，您需要执行此操作。

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

文本溢出省略号在嵌套的flexbox

3 个答案: