1
votes

Comment réduire d'abord les grands enfants flex-box?

Je souhaite créer un contrôle de fil d'Ariane pour une application Web. Le texte de chaque enfant de la boîte flexible doit être tronqué chaque fois que l'espace dans le conteneur n'est pas assez grand pour tout afficher. Le problème est que les enfants plus petits sont réduits avec les enfants plus grands et deviennent rapidement illisibles.

Par exemple 3 petits enfants ont l'air parfaitement bien:

Mais une fois qu'un enfant aura plus de texte, tout sera réduit:

Existe-t-il un moyen de configurer la boîte flexible pour réduire d'abord les enfants plus grands à la même taille que les enfants plus petits?

Dans l'idéal, l'exemple devrait ressembler à ceci:

<div class="container">
  <div class="child">
    Link A
  </div>
  <div class="child">
    Link B
  </div>
  <div class="child">
    Link C this is a really long link with lots of text
  </div>
</div>

.container {
  display: flex;
  width: 600px;
}

.child {
  font-size: 30px;
  margin: 0 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;  
}

html css flexbox

1 commentaires

un autre sujet intéressant

4 Réponses :

0
votes

Avez-vous essayé de définir width sur childs?

<div class="container">
  <div class="child">Link A</div>
  <div class="child">Link B</div>
  <div class="child">Link C this is a really long link with lots of text</div>
</div>

.container {
  display: flex;
  width: 600px;
}
.child {
  font-size: 30px;
  margin: 0 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;  
  width: 200px;
}

0 commentaires

0
votes

Vous pouvez ajouter la largeur minimale des enfants plus petits que vous souhaitez afficher en entier

<div class="container">
  <div class="child">Link A</div>
  <div class="child">Link B</div>
  <div class="child">Link C this is a really long link with lots of text</div>
</div>

.container {
  display: flex;
  width: 600px;
}
.child {
  font-size: 30px;
  margin: 0 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  min-width:86px;
}

1 commentaires

Merci! La largeur min dépend de la longueur du texte non tronqué. Existe-t-il un moyen de récupérer cela dynamiquement?

0
votes

Je pense que vous recherchez flex-shrink , flex-grow et flex-based , pour en savoir plus read ceci

<div class="container">
  <div class="child">
    Link A
  </div>
  <div class="child">
    Link B
  </div>
  <div class="child">
    Link C this is a really long link with lots of text
  </div>
</div>

.container {
  display: flex;
  width: 300px;/*I changed this just for testing*/
}

.child {
  flex: 1 1 33%;/*Add this line*/
  font-size: 30px;
  margin: 0 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;  
}

0 commentaires

4
votes

Avec flexbox je suppose que l'option est de faire étirer les éléments flex d'une quantité égale en donnant flex: 1 au élément enfant (mais cela présente l'inconvénient que les éléments enfants n'ont pas de largeur auto ) - voir la démo ci-dessous:

<div class="container">
  <div class="child">
    Link A
  </div>
  <div class="child">
    Link B
  </div>
  <div class="child">
    Link C this is a really long link with lots of text
  </div>
</div>

.container {
  display: grid; /* defines a grid container */
  grid-template-columns: repeat(3, auto); /* all three columns with auto width */
  width: 600px;
}

.child {
  font-size: 30px;
  margin: 0 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  border: 1px solid blue;
}

Utilisation de CSS Grid layout code> , vous pouvez y parvenir facilement:

Utilisez display: grid sur le conteneur.
Ajoutez grid-template-columns: repeat (3, auto) pour créer trois colonnes de largeur automatique

Voir la démo ci-dessous:

<div class="container">
  <div class="child">
    Link A
  </div>
  <div class="child">
    Link B
  </div>
  <div class="child">
    Link C this is a really long link with lots of text
  </div>
</div>

.container {
  display: flex;
  width: 600px;
}

.child {
  font-size: 30px;
  margin: 0 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  border: 1px solid blue;
  flex: 1;
}

1 commentaires

Travaille pour moi! Merci