Search code examples
cssflexboxtailwind-css

Truncate flex child in landscape or force to be on its own line if portrait

I am using CSS (here via Tailwind for brevity) to force a flex child to be on its own line in portrait mode by making the flex container flex-wrap and changing the child's order to last and width to full so that it has to go on its own line.

<div class="flex gap-2 flex-wrap [&_*]:border-b [&_*]:px-2">
  <div>fixed</div>
  <div class="truncate order-last w-full landscape:order-[unset] landscape:w-[unset]">variable</div>
  <div class="flex-1 text-center">stretch</div>
  <div>fixed</div>
</div>

This works perfectly fine.

Portrait:

Landscape:

It breaks down when the truncate child has content which was supposed to get truncated but in reality ends up pushing out the other children to a new line because of flex-wrap. Works on portrait, but in landscape, the truncate child just keeps going and pushes out its siblings over the edge.

Portrait:

Landscape:

This is the desired result:

Portrait:

Landscape:

What CSS options do I have to control the order in which flex-wrap and text-overflow: ellipsis kick in such that the text in the truncate child ellipsizes instead of pushing its siblings out of the way onto the next line?

Tailwind Play

Solution

  • Adding the following styles to truncate solve the problem

    .truncate {
    flex-basis: 10px;
    flex-grow: 1;
}

    I don't know tailwind, so i can give you only the solution in plain CSS