web-dev-qa-db-fra.com

Comment empêcher un article Flex de déborder en raison de son texte?

J'ai en tête la disposition suivante pour une liste. Chaque élément de la liste est représenté par deux colonnes. La deuxième colonne devrait occuper tout l'espace disponible, mais elle devrait être ancrée à droite avec sa taille minimale si la première colonne occupe trop d'espace. La première colonne devrait alors montrer un Ellipsis.

Le problème se produit dans ce dernier cas. Lorsque la première colonne contient trop de texte, au lieu d'afficher une Ellipse, elle s'étire hors de la Flexbox, ce qui entraîne l'affichage d'une barre de défilement horizontale. La seconde colonne n'est pas ancrée à droite.

Je voudrais qu'il soit rendu comme ceci (maquette):

Expected rendering

Comment puis-je y arriver?

Ceci est échantillon de violon .

.container {
    display: -webkit-flex;
}

div {
    white-space: nowrap;
    text-overflow: Ellipsis;
}

.container > div:last-child {
    -webkit-flex: 1;
    background: red;
}
<!-- a small first column; the second column is taking up space as expected -->
<div class="container">
    <div>foo barfoo bar</div>
    <div>foo bar</div>
</div>

<!-- a large first column; the first column is overflowing out of the flexbox container -->
<div class="container">
    <div>foo barfoo barfoo barfoo barfoo barfoo barfoo bar
    foo barfoo barfoo barfoo barfoo barfoo barfoo bar
    foo barfoo barfoo barfoo barfoo barfoo barfoo bar</div>
    <div>foo bar</div>
</div>

cssgoogle-chromeflexboxcss3
64
pimvdb

METTRE À JOUR

Ajout de code qui fonctionne:

.container {
    display: -webkit-flex; 
}

.container>div:first-child{
    white-space:nowrap;
   -webkit-order:1;
   -webkit-flex: 0 1 auto; /*important*/
    text-overflow: Ellipsis;
    overflow:hidden;
    min-width:0; /* new algorithm overrides the width calculation */
}

.container > div:last-child {
    -webkit-flex: 1;
    -webkit-order:2;
    background: red;
    -webkit-flex:1 0 auto; /*important*/
}
.container > div:first-child:hover{
    white-space:normal;
}
<div class="container">
    <div>foo barfoo bar</div>
    <div>foo bar</div>
</div>

<div class="container">
        <div>foo barfoo barfoo barfoo barfoo barfoo barfoo bar
        foo barfoo barfoo barfoo barfoo barfoo barfoo bar
        foo barfoo barfoo barfoo barfoo barfoo barfoo bar</div>
    <div>foo bar</div>
</div>
<div class="container">
    <div>foo barfoo bar</div>
    <div>foo bar</div>
</div>

<div class="container">
        <div>foo barfoo barfoo barfoo barfoo barfoo barfoo bar
        foo barfoo barfoo barfoo barfoo barfoo barfoo bar
        foo barfoo barfoo barfoo barfoo barfoo barfoo bar</div>
    <div>foo bar</div>
</div><div class="container">
    <div>foo barfoo bar</div>
    <div>foo bar</div>
</div>

Réponse originale/explication.

La spécification W3C indique: "Par défaut, les éléments flexibles ne seront pas réduits en dessous de leur taille minimale de contenu (longueur du plus long élément Word ou de taille fixe). Pour le modifier, définissez les options 'min-width' ou 'min- hauteur 'propriété. "

Si nous suivons ce raisonnement, je pense que le bogue a été supprimé de Canary, et non l'inverse. 

Vérifiez dès que je mets min-width à 0, cela fonctionne en Canaries. 

Donc, le bogue était dans les anciennes implémentations, et canary supprime ce bogue.

Cet exemple fonctionne dans canary. http://jsfiddle.net/iamanubhavsaini/zWtBu/

J'ai utilisé Google Chrome version 23.0.1245.0 canary.

112
user900360

Vous pouvez définir la taille préférée de l'enfant en définissant la troisième valeur de la propriété flex sur auto, comme suit:

flex: 1 0 auto;

C'est un raccourci pour définir la flex-basispropriété .

( Exemple )

Comme indiqué dans les commentaires, cela ne semble toutefois pas fonctionner dans Chrome Canary, bien que je ne sache pas pourquoi.

8
Marcus Stade

Mise à jour: Ce n'est pas la réponse. Cela résout différents problèmes, et c'était une étape dans la recherche de la vraie réponse. Je le garde donc pour des raisons historiques. S'il vous plaît ne votez pas dessus.

Je crois que c'est votre réponse: http://jsfiddle.net/iamanubhavsaini/zWtBu/2/

enter image description here

se référer W3C

pour le premier élément

-webkit-flex: 0 1 auto; /* important to note */

et pour le deuxième élément

-webkit-flex:1 0 auto; /* important to note */

sont les propriétés et les valeurs qui font le tour.

Lire la suite sur http://www.w3.org/TR/2012/WD-css3-flexbox-20120612/#flex

et voici comment vous inversez la commande: http://jsfiddle.net/iamanubhavsaini/zWtBu/3/

et celui-ci avec la largeur minimale prédéfinie de la chose à fond rouge: http://jsfiddle.net/iamanubhavsaini/zWtBu/1/

2
user900360

Mise à jour: Ce n'est pas la réponse. Cela résout différents problèmes, et c'était une étape dans la recherche de la vraie réponse. Je le garde donc pour des raisons historiques. S'il vous plaît ne votez pas dessus.

EDIT 2: Cette réponse ne résout pas le problème. Il y a une différence subtile entre la cible de la question et la réponse. 

Tout d'abord, text-overflow:Ellipsis fonctionne avec overflow:hidden. En fait, cela fonctionne avec autre chose que overflow:visible . Ref

Ensuite, parcourez:

http://jsfiddle.net/iamanubhavsaini/QCLjt/8/

Ici, j'ai mis les propriétés overflow et max-width. max-width:60%; et overflow:hidden font en sorte que les choses apparaissent telles que vous le souhaitez, car hidden arrête l'affichage du texte et 60% crée en fait la boîte de taille définie en cas de trop grand nombre de données texte.

Ensuite, si vous êtes vraiment intéressé par le modèle flex box, voici comment les choses se déroulent via -webkit-order. 

http://jsfiddle.net/iamanubhavsaini/QCLjt/9/

--code--

<div class="container">
    <div>foo barfoo bar</div>
    <div>foo bar</div>
</div>

<div class="container">
        <div>foo barfoo barfoo barfoo barfoo barfoo barfoo bar
        foo barfoo barfoo barfoo barfoo barfoo barfoo bar
        foo barfoo barfoo barfoo barfoo barfoo barfoo bar</div>
    <div>foo bar</div>
</div>

CSS concerné

.container {
    display: -webkit-flex;
}

div {
    white-space: nowrap;
    text-overflow: Ellipsis;
    overflow:hidden;
}
.container>div:first-child{
   -webkit-order:1;
        -webkit-flex: 1;
}
.container > div:last-child {
    -webkit-flex: 1;
    -webkit-order:2;
    background: red;
}

-- Il n'y a pas de largeur et ça marche toujours. Et c'est ce que je vois. 

enter image description here

--après commentaire

-webkit-order: N; est ce que nous allons utiliser après 2 ans et plus au lieu de float:---; et de nombreux autres hacks (si le W3C reste sur ce cours et si tous les vendeurs de navigateurs suivent) 

ici, l’ordre est 1 pour le div de gauche et 2 pour le div de droite. ainsi, ils sont gauche-droite.

http://jsfiddle.net/iamanubhavsaini/QCLjt/10/

même chose ici, mais seulement si vous cherchez Droite-Gauche, changez simplement l’ordre des choses en tant que div>first-child { -webkit-order:2; } div>last-child{-webkit-order:1;}

NOTE: Cette façon de faire -webkit-flex rend évidemment ce code inutile sur d'autres moteurs. Pour, réutiliser du code, sur plusieurs moteurs de navigateur, floating devrait être utilisé.

ci-dessous sont quelques exemples de JS; cela ne répond pas à la question -après commentaire

Je pense que cela répond à votre question et à beaucoup d'autres à venir, il existe d'autres moyens et solutions, mais pas exactement la solution pour cette question . http://jsfiddle.net/iamanubhavsaini/vtaY8/1/http://jsfiddle.net/iamanubhavsaini/9z3Qr/3/http://jsfiddle.net/iamanubhavsaini/33v8g/4/http://jsfiddle.net/iamanubhavsaini/33v8g/1/

0
user900360

pour mozilla, vous devriez ajouter "min-width: 1px;" 

0
goksel

Cet exemple m'a vraiment aidé: http://jsfiddle.net/laukstein/LLNsV/

container {
    display: -webkit-flex;
    -webkit-flex-direction: row;
    padding: 0;
    white-space: nowrap;
}

.container>div {
    overflow: hidden;
    display: inline-block;
    -webkit-flex: 1;
    min-width: 0;
    text-overflow: Ellipsis;
    -moz-box-sizing: border-box;
         box-sizing: border-box;
}
0
Con Antonakos