如何解决HTML多元素文本非自然换行？让逗号保留在行尾

问题场景 #

现有HTML代码如下：

<li>
    200g &nbsp;
    <a href="LINK">
       Fullkornspasta
    </a>
    , spaghetti
</li>

当前换行效果：链接文本“Fullkornspasta”单独占一行，下一行以“, spaghetti”开头；期望效果：逗号紧跟在“Fullkornspasta”后，留在上一行行尾，下一行以“spaghetti”开头。

解决方案 #

方法1：直接调整HTML结构（最简方案） #

删除<a>标签前后的多余空格，将逗号直接放在链接文本末尾、</a>标签之前，让逗号与链接文本紧密绑定：

<li>
    200g&nbsp;
    <a href="LINK">Fullkornspasta,</a>
    spaghetti
</li>

方法2：CSS控制换行规则（适合无法修改HTML结构的场景） #

通过CSS禁止在逗号前换行，确保逗号随前面的文本留在行尾：

li {
    /* 禁止在逗号等标点前换行 */
    line-break: strict;
    /* 确保长文本能正常换行 */
    overflow-wrap: break-word;
}

或者用white-space: nowrap包裹链接和逗号，强制两者不拆分：

<li>
    200g&nbsp;
    <span style="white-space: nowrap;">
        <a href="LINK">Fullkornspasta</a>,
    </span>
    spaghetti
</li>

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