Tailwind CSS中span无法与<h1>标题同行的问题求助

问题核心原因 #

导致换行的关键因素有两个：

1. H1标签设置了lg:w-[534px]固定宽度，大屏下容器空间不足以容纳整行文本，触发强制换行
2. 全局生效的<br />标签在大屏下依然拆分文本，破坏了整行排版逻辑

解决方案 #

1. 移除H1上的lg:w-[534px]固定宽度限制，让容器自适应文本宽度
2. 给<br />标签添加lg:hidden类，仅在小屏设备显示换行
3. 移除span元素上不必要的inline-block属性，保留默认行内元素特性即可

修改后的代码 #

<header className="max-w-[1420px] mx-auto pb-[130px] flex flex-col lg:pl-[240px] py-[50px] space-x-1 lg:flex-row relative items-center [&_*]:text-white w-full">
  <div className="flex w-[80vw] lg:w-[70vw]">
    <div className="flex flex-col justify-center">
      <h1 class="tracking-[1px] w-full text-center lg:text-left mx-auto -mt-10_disabled lg:mt-0 text-white_disabled text-[35px] lg:text-[55px] mb-2 font-extrabold whitespace-normal lg:whitespace-nowrap">
        A Safe place <br class="lg:hidden" /> to join the
        <span class="gradient-text tracking-[1px] text-[37px] lg:text-[57px] whitespace-nowrap">
          &nbsp;best
        </span>
        <span class="text-white_disabled text-[35px] lg:text-[55px] mb-2 font-extrabold whitespace-nowrap">
          .
        </span>
      </h1>
    </div>
  </div>
</header>

<script src="https://cdn.tailwindcss.com"></script>

额外校验点 #

确认自定义样式.gradient-text中没有设置display: block这类会将元素转为块级的属性，如果有，改为display: inline或inline-block保持行内特性。

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