Question 268289 in CSS Question posted in
Some basic documentation can be found here.

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

Tags:

2

Answers


  1. 0

    Use the orientation media query, r specify a point in the media query when you want the .truncate to break to a new line.
    A simple example that does what you want (if I understand the question correctly…):

    body {
  margin: 0;
  min-width: 320px;
}

.wrapp{
  padding: 16px;
  border-bottom: solid 1px;
  display: flex;
  gap: 16px;
}

@media (orientation: portrait) {
  .wrapp{
    flex-wrap: wrap;
  }
}

.fixed {
  flex: none;
}

.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (orientation: portrait) {
  .truncate {
    order: 1;
  }
}

.stretch {
  margin: auto;
  flex: none;
}
    <div class="wrapp">
  <div class="fixed">fixed</div>
  <div class="truncate">
    variable variable variable variable variable variable variable variable variable
  </div>
  <div class="stretch">stretch</div>
  <div class="fixed">fixed</div>
</div>
    Login or Signup to reply.
  2. 0

    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

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search