如何让背景贴合换行文本且无多余空白（Tailwind CSS场景）

问题根源在于父元素为flex容器时，子元素（包裹邮箱的span）默认会拉伸至容器可用宽度，导致文本换行后背景仍铺满容器宽度，出现多余空白。针对这个问题，提供两种可行方案：

方案1：背景贴合整个文本块（宽度为最长行宽度） #

通过将span设置为inline-block，让其宽度由内容决定而非撑满容器，同时限制最大宽度避免溢出，配合换行优化类确保长邮箱正常换行：

<a
  className="flex items-center justify-center text-sm transition-colors duration-300 hover:text-muted-foreground"
  href={`mailto:${member.email}`}
>
  <MailIcon className="mr-2 size-4 flex-shrink-0" />
  <span className="bg-green-500 inline-block max-w-full break-words">
    sssssss.sssss@ssssssss-ssss.sss
  </span>
</a>

方案2：背景逐行贴合文本 #

如果希望每行文本的背景都独立贴合自身宽度，将span设置为inline即可：

<a
  className="flex items-center justify-center text-sm transition-colors duration-300 hover:text-muted-foreground"
  href={`mailto:${member.email}`}
>
  <MailIcon className="mr-2 size-4 flex-shrink-0" />
  <span className="bg-green-500 inline max-w-full break-words">
    sssssss.sssss@ssssssss-ssss.sss
  </span>
</a>

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