Я использую CSS (здесь для краткости — Tailwind), чтобы заставить гибкого дочернего элемента находиться на отдельной строке в портретном режиме, создав гибкий контейнер flex-wrap и изменив дочерний элемент порядок должен быть последним, а ширина - полной, чтобы он располагался на отдельной строке.
исправлено переменная растянуть исправлено Это прекрасно работает.
Портрет:
Пейзаж:
Он выходит из строя, когда дочерний элемент truncate имеет контент, который должен был быть усечен, но на самом деле в конечном итоге другие дочерние элементы вытесняются на новую строку из-за flex-wrap. Работает в портретной ориентации, но в альбомной ориентации дочерний элемент truncate просто продолжает работать и выталкивает своих братьев и сестер за край.
Портрет:
Пейзаж:
Это желаемый результат:
Портрет:
Пейзаж:
Какие параметры CSS мне нужны для управления порядком, в котором flex-wrap и text-overflow: ellipsis срабатывают так, что текст в обрезается дочерний элемент увеличивает эллипс вместо того, чтобы отодвинуть своих братьев и сестер на следующую строку?
Игра попутного ветра
