Bootstrap 面包屑线返回响应式

Question

我有这个面包屑

首页 > 新闻动态 > 外线新闻长标题

<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: "";
}

在智能手机等小屏幕上，面包屑显示如下：
首页 > 新闻动态
> 其他线上的新闻长标题

我希望它以全角显示，并在屏幕末尾有一个回车符：
首页 > 新闻中心 > 长标题
其他线上的新闻

Answer 1

我放弃了在 ol 上使用 flex，使 li 元素内联并调整了填充。

.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 {
    list-style: none;
    margin: 0;
    padding: 0 0 0 0.25rem;
}
.breadcrumb li {
    display: inline;
}
.breadcrumb li + li::before {
    content: "›";
}