Problèmes combinant affichage: flex, tables et débordement de texte: ellipse

Question

J'ai un problème de combinaison (haut vers le bas) display:flex, des éléments flexibles, une table, puis des cellules contenant du texte que je veux tronquer sans affecter la largeur de la flex des articles, ni pousser la table en dehors de l'élément flexible. Tronquer le texte fonctionne bien si placé dans un inline-block à l'intérieur de l'élément flexible, mais quand je suis assis une table/rangée/cellule entre les deux, la table devient détraquée.

J'ai regardé Setting ellipsis on text from a flex container, mais cela ne tient pas compte des éléments table, ni cet exemple CSS Tricks. J'ai également utilisé ces références pour configurer mon flexboxes.

Voici mon JSFiddle exemple et aussi:

/* flex layout */ 
 
.flex-space-between { 
 
    display: flex; 
 
    justify-content: space-between; 
 
} 
 
.flex-space-between > div { 
 
    width:100%; 
 
    flex: 1 1 auto; 
 
} 
 
.flex-with-gap { margin: -14px -7px; } 
 
.flex-with-gap > div { margin: 14px 7px; } 
 

 

 
/* colouring and other styles */ 
 
.flex-space-between > div { 
 
    box-sizing:border-box; 
 
    background-color:white; 
 
    border: solid 1px #999; 
 
    padding: 0.5em;min-width: 0; 
 
} 
 
body { font-family: sans-serif } 
 

 
.truncate { 
 
    width:100%; 
 
    display: inline-block; 
 
    color:red; 
 
    white-space: nowrap; 
 
    overflow: hidden; 
 
    text-overflow: ellipsis; 
 
} 
 

 
.t1 { 
 
    width: 100%; 
 
    border-collapse:collapse; 
 
} 
 
.t1 TD, .t1 TH { 
 
    border:1px dotted blue; 
 
} 
 
.t1 TH { 
 
    text-align:left; 
 
    font-weight:normal; 
 
} 
 
.t1 .number { 
 
    text-align:right; 
 
    font-size: 180%; 
 
    color:#66F;font-weight:bold; 
 
} 
 
.t1 .text { 
 
    max-width:80%; 
 
} 
 

 
.info { color: blue; font-style:italic;}

<div class='flex-space-between flex-with-gap'> 
 
    <div> 
 
    <div class='truncate'>Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam.</div> 
 
    <p class='info'>The div.truncate element above truncates fine.</p> 
 
    </div> 
 
    
 
    <div> 
 
    <div class='flex-space-between'> 
 
    <div class='truncate'>Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam.</div> 
 
    <div class='truncate'>Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam.</div> 
 
    </div> 
 
    <p class='info'>So do the above which are contained inside sub-flexboxes.</p> 
 
    </div> 
 

 
    <div></div> 
 
    <div></div> 
 
</div> 
 

 
<div class='flex-space-between flex-with-gap'> 
 
    <div></div> 
 
    <div> 
 
    <table class='t1'> 
 
    <tr> 
 
    <th class='text'>Locations</th> 
 
    <td class='number'>123</td> 
 
    </tr> 
 
    <tr> 
 
    <th class='text'>Divisions</th> 
 
    <td class='number'>123</td> 
 
    </tr> 
 
    <tr> 
 
    <th class='text'>Business Units Business Units Business Units</th> 
 
    <td class='number'>80</td> 
 
    </tr> 
 
    </table> 
 
    <p class='info'>Now, I'm wanting to place a small table in my flex items as above (lists of text and numeric values) but I want the text (e.g. Business Units) to truncate if has to, and not wrap.</p> 
 
    </div> 
 
    
 
    <div> 
 
    <table class='t1'> 
 
    <tr> 
 
    <th class='text'>Locations</th> 
 
    <td class='number'>123</td> 
 
    </tr> 
 
    <tr> 
 
    <th class='text'>Divisions</th> 
 
    <td class='number'>123</td> 
 
    </tr> 
 
    <tr> 
 
    <th class='text'><div class='truncate'>Business Units Business Units Business Units</div></th> 
 
    <td class='number'>80</td> 
 
    </tr> 
 
    </table> 
 
    <p class='info'>But this is what now happens when trucating. The "white-space: nowrap;" kicks in but not the "overflow: hidden;" nor "text-overflow: ellipsis;".</p> 
 
    <p class='info'> 
 
    I think truncating text inside a TD/TH is the problem but not sure why. 
 
    </p> 
 
    </div> 
 
    <div style='opacity:0.9'></div> 
 
</div> 
 

 
<div class='flex-space-between flex-with-gap'> 
 
    <div>100%</div> 
 
</div> 
 

 
<div class='flex-space-between flex-with-gap'> 
 
    <div>33%</div><div>33%</div><div>33%</div> 
 
</div> 
 

 
<div class='flex-space-between flex-with-gap'> 
 
    <div>50%<br>Multi-line line</div><div>50%</div> 
 
</div> 
 

 
<div class='flex-space-between flex-with-gap'> 
 
    <div>25%</div><div>25%</div><div>25%</div><div>25%</div> 
 
</div>

Answer 1

Vous devez passer à l'autre algorithme de mise en page de table: table-layout: fixed, celui qui fait ce que l'auteur (vous) dit et n'essaie pas de s'adapter automatiquement au contenu. Si vous rencontrez des problèmes avec les largeurs définies, essayez de les définir sur la première ligne.
Aussi max-width propriété sur les cellules n'a aucun effet AFAIK. Oups non, c'est undefined behavior. Je l'ai changé en width: 55%, ce qui est très bien ici sur SO, mais je suppose que votre page est plus grande que les extraits ici, donc YMMV.

/* flex layout */ 
 
.flex-space-between { 
 
    display: flex; 
 
    justify-content: space-between; 
 
} 
 
.flex-space-between > div { 
 
    width:100%; 
 
    flex: 1 1 auto; 
 
} 
 
.flex-with-gap { margin: -14px -7px; } 
 
.flex-with-gap > div { margin: 14px 7px; } 
 

 

 
/* colouring and other styles */ 
 
.flex-space-between > div { 
 
    box-sizing:border-box; 
 
    background-color:white; 
 
    border: solid 1px #999; 
 
    padding: 0.5em;min-width: 0; 
 
} 
 
body { font-family: sans-serif } 
 

 
.truncate { 
 
    width:100%; 
 
    display: inline-block; 
 
    color:red; 
 
    white-space: nowrap; 
 
    overflow: hidden; 
 
    text-overflow: ellipsis; 
 
} 
 

 
.t1 { 
 
    width: 100%; 
 
    border-collapse:collapse; 
 
    table-layout: fixed; 
 
} 
 
.t1 TD, .t1 TH { 
 
    border:1px dotted blue; 
 
} 
 
.t1 TH { 
 
    text-align:left; 
 
    font-weight:normal; 
 
} 
 
.t1 .number { 
 
    text-align:right; 
 
    font-size: 180%; 
 
    color:#66F;font-weight:bold; 
 
} 
 
.t1 .text { 
 
    width: 55%; 
 
    background: yellow; 
 
} 
 

 
.info { color: blue; font-style:italic;}

<div class='flex-space-between flex-with-gap'> 
 
    <div> 
 
    <div class='truncate'>Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam.</div> 
 
    <p class='info'>The div.truncate element above truncates fine.</p> 
 
    </div> 
 
    
 
    <div> 
 
    <div class='flex-space-between'> 
 
    <div class='truncate'>Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam.</div> 
 
    <div class='truncate'>Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam.</div> 
 
    </div> 
 
    <p class='info'>So do the above which are contained inside sub-flexboxes.</p> 
 
    </div> 
 

 
    <div></div> 
 
    <div></div> 
 
</div> 
 

 
<div class='flex-space-between flex-with-gap'> 
 
    <div></div> 
 
    <div> 
 
    <table class='t1'> 
 
    <tr> 
 
    <th class='text'>Locations</th> 
 
    <td class='number'>123</td> 
 
    </tr> 
 
    <tr> 
 
    <th class='text'>Divisions</th> 
 
    <td class='number'>123</td> 
 
    </tr> 
 
    <tr> 
 
    <th class='text'>Business Units Business Units Business Units</th> 
 
    <td class='number'>80</td> 
 
    </tr> 
 
    </table> 
 
    <p class='info'>Now, I'm wanting to place a small table in my flex items as above (lists of text and numeric values) but I want the text (e.g. Business Units) to truncate if has to, and not wrap.</p> 
 
    </div> 
 
    
 
    <div> 
 
    <table class='t1'> 
 
    <tr> 
 
    <th class='text'>Locations</th> 
 
    <td class='number'>123</td> 
 
    </tr> 
 
    <tr> 
 
    <th class='text'>Divisions</th> 
 
    <td class='number'>123</td> 
 
    </tr> 
 
    <tr> 
 
    <th class='text'><div class='truncate'>Business Units Business Units Business Units</div></th> 
 
    <td class='number'>80</td> 
 
    </tr> 
 
    </table> 
 
    <p class='info'>But this is what now happens when trucating. The "white-space: nowrap;" kicks in but not the "overflow: hidden;" nor "text-overflow: ellipsis;".</p> 
 
    <p class='info'> 
 
    I think truncating text inside a TD/TH is the problem but not sure why. 
 
    </p> 
 
    </div> 
 
    <div style='opacity:0.9'></div> 
 
</div> 
 

 
<div class='flex-space-between flex-with-gap'> 
 
    <div>100%</div> 
 
</div> 
 

 
<div class='flex-space-between flex-with-gap'> 
 
    <div>33%</div><div>33%</div><div>33%</div> 
 
</div> 
 

 
<div class='flex-space-between flex-with-gap'> 
 
    <div>50%<br>Multi-line line</div><div>50%</div> 
 
</div> 
 

 
<div class='flex-space-between flex-with-gap'> 
 
    <div>25%</div><div>25%</div><div>25%</div><div>25%</div> 
 
</div>