换行时如何显示我的导航栏处于折叠状态？

Question

我有一个导航栏，它可以是长链接标题，最多可以包含25个字符，并且可以是2到6个链接。

我进行了媒体查询，以减小字体大小（最小字体为10像素，因为小于字体不可读），并填充链接以压缩导航栏，直到其处于折叠形式为止，以避免换行但是您可以进行很多压缩操作，直到看起来很糟糕或出现换行符为止。

@media screen and (max-width: 1479px){
    .navbar-nav > li > a {
        font-size:calc(10px + 0.1vw);
    }
}

@media screen and (max-width: 1327px){
    .navbar-nav > li > a {
        font-size:calc(10px + 0.1vw);
        padding-left: 5px;
        padding-right: 5px;
    }
}

@media screen and (max-width: 1220px){
    .navbar-nav > li > a {
        font-size:calc(10px + 0.1vw);
        padding-left: 4px;
        padding-right: 4px;
    }
}

这是我的导航栏在整个宽度上的外观。

这是压缩后的样子。

但是，如果它小于1220像素，则会换行。

所以我的问题是，当出现换行符时，如何将其以这种折叠形式显示：