如何实现部分字母跨两行的文本标题（CSS/Tailwind实现）

针对你需要的部分文字跨两行的标题效果，之前的Grid布局方案因行高、容器宽度和对齐逻辑问题导致不够紧凑，下面是调整后的精准实现方案：

修正后的代码 #

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

<div class="inline-grid grid-rows-2 grid-flow-col justify-center self-center gap-0">
  <h1 class="text-[256px] font-bold font-mono text-light-blue row-span-2 leading-none">PR</h1>
  <h1 class="text-[90px] font-bold font-mono text-light-blue align-self-end leading-none">ESIDENT</h1>
  <h1 class="text-[90px] font-bold font-mono text-light-blue align-self-start leading-none">IZE</h1>
</div>

关键调整说明 #

• 改用inline-grid作为容器：让容器仅包裹标题内容，避免原代码中w-2/3这类固定宽度导致的布局松散，实现内容自然紧凑排列
• 全局添加leading-none：消除字体默认行高，让文本完全贴合Grid的行框，彻底压缩垂直方向的多余空隙
• 用Grid原生对齐属性替代flex逻辑：通过align-self-end让ESIDENT底部与PR底部精准对齐，align-self-start让IZE顶部与PR顶部对齐，适配Grid布局的对齐规则
• 强制gap-0：确保Grid项之间无额外间距，进一步强化紧凑效果

如果需要限制标题整体宽度，可给外层容器添加max-w-[自定义数值]类（如max-w-[800px]）按需调整即可。

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