web-dev-qa-db-ja.com

ネストされたflexboxで、テキストオーバーフローの省略記号が機能しない

フレックスボックスで作成された2列のレイアウトがあります。

右側の列には2つの行があり、最初の行にはヘッダーが含まれ、2番目の行にはページコンテンツが含まれています。

ヘッダー内には、3つの列、ボタン、いくつかのテキスト、およびボタンがあります。

ボタンを列の左右に配置して、テキストが追加のスペースを占めるようにします。

最後に、テキストにwhite-space:nowrapおよびtext-overflow:Ellipsisプロパティを使用して、長いタイトルを切り捨てます。

私の問題はこれです：flexbox that isnested in another 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>

最初のフィドルで欲しいものをどのように達成できますか？

ありがとう

htmlcssflexboxellipsis
19
Max Mumford

コードに2つの問題があり、省略記号が機能しません。

  1. div.rightにはdiv.headerが含まれ、ボタンとテキストが含まれます。

    div.rightは、メインコンテナー（.container）内のフレックスアイテムです。

    デフォルトでは、 フレックスアイテムは、そのコンテンツのサイズ より小さくすることはできません。フレックスアイテムの初期設定はmin-width: autoです。

    これは、折り返しではないテキストの長さが、親フレックスアイテムの最小サイズを設定することを意味します。フレックスアイテムがコンテンツを超えて縮小できるようにする1つの方法は、フレックスアイテムをmin-width: 0に設定することです。

    これは.contentフレックスアイテムに対して既に行っていますが、.rightアイテムにも設定する必要があります。

  2. .content要素をflex: 0 1 autoに設定しました。

    これは、コンテンツのサイズ（flex-basis: auto）を使用するようにflexアイテムに指示します。テキストはサイズを設定します。

    代わりに、幅を0に設定し、必要に応じてフレックスコンテナーにスペースを分散させます。 これは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>

改訂フィドル

15
Michael_B

の値：

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

要素のコンテンツがその幅を超えている場合にのみ機能します。

.header .contentの幅を設定できます：

.header .content {
    width: 50%;
}

そしてそれはあなたが期待するように機能します：
http://jsfiddle.net/t82pqks4/

2
Dekel