Заставить элемент появляться в конце строки в реакции, независимо от размера экрана
Итак, у меня есть элемент, который переворачивает слова через фиксированный интервал.
<div
className = "inline-block flex justify-center items-center before:content-['lore_ipsum_dolor_lore_ipsum_dolor'] drop-shadow-[0_3px_3px_rgba(0,0,0,1)] text-2xl md:text-3xl mb-4"
>
<FlipWords words = {["word1", "word2", "word3", "word4"]} />
</div>
нормально отображается на среднем и большом экране
но когда экран становится размером с мобильный...
Я бы хотел, чтобы в этом случае здесь появились «слова»:
Таким образом, размер экрана не должен иметь значения: когда flex этого элемента выполняет математические вычисления, основанные на размере контейнера, он все равно должен оставаться рядом с последним словом во фразе, как мне это сделать?
Реализация FlipWords
Я считаю, что это из-за гибкости. Можете ли вы удалить свойство flex и посмотреть, работает ли оно?
Ответы 1
Это связано с тем, что элемент :before и флиппер — это два отдельных гибких элемента, которые нужно размещать рядом.
Поскольку вы используете React, самое простое решение — переместить содержимое :before («lore ipsum dolor...») под оболочку, чтобы обернуть его вместе с перевернутыми словами.
Наконец, если вы хотите центрировать текст после переноса, justify-center недостаточно. text-center тоже нужен.
<div className = "inline-block flex justify-center text-center items-center drop-shadow-[0_3px_3px_rgba(0,0,0,1)] text-2xl md:text-3xl mb-4">
<div>
lore ipsum dolor lore ipsum_dolor
<FlipWords words = {["word1", "word2", "word3", "word4"]} />
</div>
</div>
Одна из идей решения на чистом CSS — использовать display:content (contents в Tailwind) на :before и обертке перевернутых слов. Это позволяет им не создавать конкретный блок самостоятельно, поэтому их дочерние/псевдоблоки будут размещаться непосредственно вместе. ** Предполагается, что слова в компоненте <FlipWords> не вложены в другие оболочки, что не в вашем случае.
<script src = "https://cdn.tailwindcss.com"></script>
<div class = "inline-block flex justify-center text-center items-center before:contents before:content-['lore_ipsum_dolor_lore_ipsum_dolor'] drop-shadow-[0_3px_3px_rgba(0,0,0,1)] text-2xl md:text-3xl mb-4">
<div class = "contents whitespace-pre"> word1</div><!--<FlipWords>-->
</div>вот реализация флипвордов, она содержит обертки для слов ui.aceternity.com/comComponents/flip-words
Ответ обновлен. В этом случае я скажу просто сгруппировать содержимое и FlipWords в оболочку, чтобы они не были разделены на два гибких элемента.
Можете ли вы добавить свою реализацию флип-слов?