ReactJS中如何让元素始终显示在行尾，不受屏幕尺寸影响

核心问题分析 #

原代码中容器使用flex justify-center，会将伪元素文本和FlipWords作为两个独立的flex项目处理，移动端文本换行后，FlipWords会被单独居中，而非紧跟在文本末尾。要实现目标，需让两者处于同一文本流中，而非独立的flex项目。

解决方案步骤 #

1. 移除居中布局：删掉容器的justify-center属性，避免内容强制居中导致错位。
2. 统一元素显示模式：
   • 给before伪元素添加before:inline（或before:inline-block），使其融入文本流。
   • 给FlipWords组件添加inline-block类，让它成为行内块元素，与伪元素文本自然排列。
3. 可选优化：添加before:mr-2为伪元素文本和FlipWords设置间距，提升视觉体验。

修改后的代码示例 #

<div
  className="inline-block items-center before:content-['lore_ipsum_dolor_lore_ipsum_dolor'] before:inline before:mr-2 drop-shadow-[0_3px_3px_rgba(0,0,0,1)] text-2xl md:text-3xl mb-4"
>
  <FlipWords words={["word1", "word2", "word3", "word4"]} className="inline-block" />
</div>

原理说明 #

通过将伪元素和FlipWords都设置为行内/行内块元素，让它们处于同一文本流中，无论屏幕尺寸如何，FlipWords都会自动紧跟在伪元素文本的最后一行末尾，不会因换行或屏幕缩小出现错位。

内容的提问来源于stack exchange，提问作者user2640145