web-dev-qa-db-fra.com

Ellipsis de débordement de texte ne fonctionne pas dans imbriqué flexbox

J'ai une disposition à deux colonnes créée avec des boîtes flexibles.

Dans la colonne de droite, j'ai deux lignes, la première contenant un en-tête et la seconde contenant le contenu de la page.

Dans l'en-tête, j'ai trois colonnes, un bouton, du texte et un bouton.

Je veux que les boutons se trouvent à gauche et à droite de la colonne, le texte occupant une place supplémentaire.

Enfin, je veux que le texte ait white-space:nowrap et text-overflow:Ellipsis propriétés pour tronquer les titres longs.

Mon problème est le suivant: Je ne peux pas faire en sorte que l'habillage de texte fonctionne correctement dans un flexbox qui est imbriqué dans une autre flexbox , comme le montre ce violon:

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>

Cependant, le même code fonctionne exactement lorsque l'en-tête n'est pas imbriqué dans une boîte flexible:

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>

Comment puis-je réaliser ce que je veux dans le premier violon?

Merci

htmlcssflexboxellipsis
19
Max Mumford

Il y a deux problèmes dans votre code qui empêchent les points de suspension de fonctionner:

  1. div.right contient div.header, qui contient à son tour le bouton et le texte.

    div.right est un élément flexible dans le conteneur principal (.container).

    Par défaut, un élément flexible ne peut pas être plus petit que la taille de son contenu . Le paramètre initial sur les éléments flexibles est min-width: auto.

    Cela signifie que la longueur de votre texte, qui n'est pas enveloppante, définira une taille minimale pour les éléments flex parents. Une façon d'activer les éléments flexibles au-delà de leur contenu consiste à définir un élément flexible sur min-width: 0.

    Vous l'avez déjà fait pour le .content élément flexible, mais il doit être défini sur .right élément également.

  2. Vous avez le .content élément défini sur flex: 0 1 auto.

    Cela indique à l'élément flexible d'utiliser la taille du contenu (flex-basis: auto). Le texte définit la taille.

    Au lieu de cela, définissez la largeur sur 0 et laissez le conteneur flexible répartir l'espace, si nécessaire. Vous pouvez le faire avec flex: 1 1 0, qui est identique à 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>

violon révisé

15
Michael_B

Les valeurs de:

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

Ne fonctionnera que si le contenu de votre élément dépasse sa largeur.

Vous pouvez définir la largeur de .header .content:

.header .content {
    width: 50%;
}

Et cela fonctionnera comme vous vous y attendez:
http://jsfiddle.net/t82pqks4/

2
Dekel