如何将href设置为行内样式，避免链接单独显示在新行？

问题原因 #

链接默认是行内元素，出现换行通常是以下几个原因导致的：

• 链接被设置为块级元素（display: block），自动独占一行
• JSX中内容换行被组件的样式解析为实际换行
• 父容器ContentBlock设置了保留换行的空白符规则

解决方案 #

方案1：强制链接为行内元素 #

你用的是Tailwind CSS，直接在a标签的className中增加inline属性，强制保持行内展示：

<ContentBlock
    className={'text-gray-300 mt-4'}
>
    Blah blah blah, blah BLAH, blah
    <a href="foo.bar" 
       className={'inline underline text-gray-200 hover:text-blue-300'}>
          foo bar
    </a>
</ContentBlock>

方案2：调整JSX内容排版 #

去掉文本和a标签之间的多余换行，避免被解析为实际换行，也可以用{' '}手动控制间隔：

<ContentBlock
    className={'text-gray-300 mt-4'}
>
    Blah blah blah, blah BLAH, blah{' '}
    <a href="foo.bar" className={'underline text-gray-200 hover:text-blue-300'}>foo bar</a>
</ContentBlock>

方案3：修改父容器的空白符规则 #

如果ContentBlock设置了white-space: pre/pre-line这类保留换行的样式，给父容器增加whitespace-normal类重置空白符规则：

<ContentBlock
    className={'text-gray-300 mt-4 whitespace-normal'}
>
    Blah blah blah, blah BLAH, blah
    <a href="foo.bar" 
       className={'underline text-gray-200 hover:text-blue-300'}>
          foo bar
    </a>
</ContentBlock>

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