I've got a problem combining (top downwards) display:flex, flex items, table and then cells containing text that I want to truncate without affecting the width of the flex items, nor pushing the table outside of the flex item.
Truncating text works fine if placed in an inline-block inside the flex item, but when I sit a table/row/cell between the two, the table goes haywire.
I've looked at Setting ellipsis on text from a flex container, but that doesn't consider table elements, nor does this CSS Tricks example. I've also used these references to set up my flexboxes.
Here is my JSFiddle example and also:
/* 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>
