我有一個用flexboxes創建的兩列布局。

在右欄中，我有兩行，第一行包含標題，第二行包含頁面內容。

在標題中，我有三列，一個按鈕，一些文本和一個按鈕。

我希望按鈕位于列的左側和右側，文本占據任何額外的空間。

最后，我希望文本有white-space:nowrap和text-overflow:ellipsis屬性來截斷長標題。

我的問題是這樣的:我無法讓嵌套在另一個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>

您的代碼中有兩個問題阻止省略號工作:

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

div.right是主容器(。容器)。

默認情況下，flex項目不能小于其內容的大小。彈性項目的初始設置是最小寬度:自動。

這意味著未換行的文本長度將為父flex項目設置最小大小。一種使flex項目收縮超過其內容的方法是將flex項目設置為min-width: 0。

你已經為。內容彈性項，但它需要在。也是正確的項目。

你已經得到了。內容元素設置為flex: 0 1自動。

這告訴flex項使用內容的大小(flex-basis: auto)。文本設置大小。

相反，將寬度設置為0，并根據需要讓flex容器分配空間。你可以用flex: 1 1 0來做這個，和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>

以下各項的價值:

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

僅當元素的內容超出其寬度時才有效。

您可以設置的寬度。標題。內容:

.header .content {
    width: 50%;
}

它將按照您的預期工作: http://jsfiddle.net/t82pqks4/

上面的解決方案對我來說在一個非常嵌套的具有行和列的Flex布局中不起作用。它一直使我的h3標簽比父標簽寬，因為

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

但我意外發現，添加display:inline-grid；解決了問題并正確應用了省略號。

我不知道這對你是否有幫助，但對我來說是有幫助的。

我希望這個解決方案能幫助到其他人，因為我的頁面是一個巨大的flexbox嵌套組合。所以最小寬度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>