Усечение гибкого дочернего элемента в альбомной ориентации или принудительное размещение на отдельной линии в портретной ⇐ CSS

[Anonymous]

Я использую CSS (здесь для краткости — Tailwind), чтобы заставить гибкого дочернего элемента находиться на отдельной строке в портретном режиме, создав гибкий контейнер flex-wrap и изменив дочерний элемент порядок должен быть последним, а ширина - полной, чтобы он располагался на отдельной строке.

исправлено переменная растянуть исправлено Это прекрасно работает.

Портрет:





Пейзаж:





Он выходит из строя, когда дочерний элемент truncate имеет контент, который должен был быть усечен, но на самом деле в конечном итоге другие дочерние элементы вытесняются на новую строку из-за flex-wrap. Работает в портретной ориентации, но в альбомной ориентации дочерний элемент truncate просто продолжает работать и выталкивает своих братьев и сестер за край.

Портрет:





Пейзаж:





Это желаемый результат:

Портрет:





Пейзаж:





Какие параметры CSS мне нужны для управления порядком, в котором flex-wrap и text-overflow: ellipsis срабатывают так, что текст в обрезается дочерний элемент увеличивает эллипс вместо того, чтобы отодвинуть своих братьев и сестер на следующую строку?

Игра попутного ветра