如何让面包屑导航像文本一样自然换行（避免元素内折行）

我正在优化面包屑导航，现在遇到个问题：设备宽度不足时，面包屑里的长内容（比如长产品名称）会在元素内部被拆分成多行。我想要的效果是每个面包屑项能像完整文本一样，先用上一行剩余空间，放不下的话整个项直接换行到下一行，而不是先在自身内部折行。试过给li元素设置display: inline;，但没解决问题。

当前效果 #

• 移动端效果：
• 桌面端效果：

相关代码 #

<ol class="breadcrumb">
    <li class="js_goback">
        <a class="__go-back" href="javascript:history.go(-1)">
            <i class="fa-regular fa-angle-left"></i>Back</a>
    </li>
    <li class="breadcrumb-item" aria-current="page">
        <a href="/"><i class="fa-regular fal fa-home-alt"></i></a>
    </li>
    <li class="breadcrumb-item" aria-current="page">
        <a href="/">Category</a>
    </li>
    <li class="breadcrumb-item" aria-current="page">
        <a href="/">Another category</a>
    </li>
    <li class="breadcrumb-item" aria-current="page">
        <a href="/">Also Category</a>
    </li>
    <li class="breadcrumb-item" aria-current="page">
        <span class="active">A very long product name that now breaks down while i do not want this to happen</span>
    </li>
</ol>

解决方法 #

给面包屑的<li>元素加上两个关键CSS属性就能实现整体换行：

• white-space: nowrap;：强制元素内部文本不折行，保持完整
• display: inline-block;：让li作为一个独立块级单元参与行布局，放不下时整体换行

示例CSS代码：

.breadcrumb li {
    display: inline-block;
    white-space: nowrap;
    /* 可选：给每个项之间加间距，优化视觉 */
    margin-right: 0.5rem;
}

/* 可选：添加面包屑分隔符，按需调整 */
.breadcrumb li:not(:last-child)::after {
    content: "/";
    margin-left: 0.5rem;
    color: #999;
}

原理很简单：inline-block让每个li成为一个不可拆分的整体，white-space: nowrap确保内部文本不会被截断，这样当一行空间不足时，整个li就会自动移到下一行，完美符合需求。

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