Here is a 3-tier nested div tree structure with the outer node having a maximum width where I want the ellipsis wrapping to occur.
I've almost achieved the desired result, but the issue arises when the inner nodes are not trimmed to accommodate as much text as possible within the parent node based on its width. Instead of displaying only as many child nodes that can fit completely, leaving the rest as blank space like:
left1~right1 left2~right2…
I prefer it to look like:
left1~right1 left2~right2 left3~rig…You may need to adjust the max-width value to observe this behavior.
html, body {
width: 100%;
}
.outer {
background-color: lavender;
display: inline-block;
max-width: 30%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.inner {
display: inline-block;
}
.inner>* {
display: inline;
}
.inner>:first-child::after {
content: "~"
}<html>
<body>
<div class="outer">
<div class="inner">
<div>left1</div>
<div>right1</div>
</div>
<div class="inner">
<div>left2</div>
<div>right2</div>
</div>
<div class="inner">
<div>left3</div>
<div>right3</div>
</div>
<div class="inner">
<div>left4</div>
<div>right4</div>
</div>
</div>
</body>
</html>