Bootstrap面包屑响应式换行问题：优化移动端显示效果

现有面包屑HTML结构：

<nav aria-label="Fil d'ariane" class="breadcrumb">
    <ol>
        <li>
            <a class="mdi mdi-home" href="https://google" id="ariane_n1">Google</a>
        </li>
        <li>
            <a href="https://google/news">News</a>
        </li>
        <li>
            <a href="https://google/news/7357"><span aria-current="page" class="ariane_courant">Long title of the news that goes on other line</span></a>
        </li>
    </ol>
</nav>

对应的CSS代码：

.breadcrumb {
    background-color: white;
    border-radius: unset;
    margin: .3rem 0 .5rem 0;
    padding: 0;
    display: flex; /* bootstrap */
    flex-wrap: wrap; /* bootstrap */
    list-style: none; /* bootstrap */
}
.breadcrumb ol {
    align-items: baseline;
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    margin: 0;
    padding: 0;
}
.breadcrumb li::before {
    content: "›";
    padding: 0px 0px 0px 0.25rem;
}
.breadcrumb li:first-child::before {
    content: "";
}

当前小屏幕下显示问题：

Home > News

Long title of the news that goes on other line

期望实现的显示效果：

Home > News > Long title of the
news that goes on other line

修改CSS，让面包屑文本在屏幕边缘自然换行，同时保持分隔符与文本的连贯性：

.breadcrumb {
    background-color: white;
    border-radius: unset;
    margin: .3rem 0 .5rem 0;
    padding: 0;
    list-style: none; /* bootstrap */
}
.breadcrumb ol {
    align-items: baseline;
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%; /* 确保ol占满容器宽度 */
}
.breadcrumb li {
    display: flex; /* 让分隔符与li内容在同一行对齐 */
    align-items: center;
}
.breadcrumb li::before {
    content: "›";
    padding: 0 0.25rem;
}
.breadcrumb li:first-child::before {
    content: "";
}
.breadcrumb li:last-child {
    flex: 1; /* 让最后一个li占据剩余宽度 */
    min-width: 0; /* 解除flex子元素的最小宽度限制，允许内容换行 */
}
.breadcrumb li:last-child a {
    word-wrap: break-word; /* 强制长文本在屏幕边缘自动换行 */
}

调整说明： #

1. 给<ol>添加width: 100%，确保容器占满可用宽度，避免内容提前换行；
2. 给每个<li>设置display: flex，保证分隔符和文本始终在同一行对齐；
3. 给最后一个<li>设置flex: 1和min-width: 0，让它能占据剩余空间，同时允许内部内容换行；
4. 给最后一个<li>内的<a>添加word-wrap: break-word，强制长文本在屏幕边缘自动换行。

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