Jquery 当视口狭窄时，强制面包屑项目不打断到另一行

我正在尝试创建具有箭头外观的面包屑。这就是设计

请注意，如果文本太长，则在每个面包屑项目中的行数更多

我们可以假设最多有4个面包屑项目：

• 家
• 第一类
• 点（对于更多类别的情况）
• 最后一类

我有一个解决方案，但由于设计响应迅速，该解决方案对于狭窄的视口根本不起作用。当breadcrumb项中的文本太长时，它会一直排成一行，使breadcrumb项变长。然后，当视口变窄时，整个面包屑项目将进入新行。错了

我使用引导

你知道怎么解决这个问题吗

小提琴来了：

HTML:

---

您必须直接为链接定义空白属性

.breadcrumbs li a {
    white-space: nowrap;
}

---

我有一个面包屑的行为，你描述，虽然你可能想进一步调整这一点。已经做了很多更改（都是CSS），所以我将尝试解释影响布局的主要更改

.breadcrumb {
    height: 48px;
    vertical-align: middle;
    font-size: 0;
}

字体大小：0

用于删除

li

之间的任何空白

.breadcrumb .dots {
    padding: 18px 0 10px 20px;
}

已完全移除，因为不再需要填充物

.breadcrumb li {
    display: inline-block;
    list-style: none;
    padding: 0 0 0 40px;
    vertical-align: middle;
    font-size: 12px;
    background: lightgrey;
    height: 48px;
    max-width: 30%;
    white-space: normal;
}

float：左已被删除，因为您无法使用它和
显示：内联块同时（浮动使元素
显示：block；
）<代码>填充：0 40px已从
a
移动到
li
，并删除了顶部和底部填充，以允许文本占据所需空间<代码>垂直对齐：中间对齐以垂直对齐
li
，现在设置为
显示：内联块<代码>字体大小：12px
设置为覆盖
ul
上的设置

.breadcrumb li:after {
    content: " ";
    display: inline-block;
    vertical-align: middle;
    height: 100%;
}

这是为了垂直对齐
a
s中的文本而添加的

.breadcrumb li a {
    color: black;
    text-decoration: none;
    background: lightgrey;
    position: relative;
    display: inline-block;
    vertical-align: middle;
}

填充
被删除，因为文本现在垂直对齐，
浮动
也被删除，原因如上所述

.breadcrumb li:last-child {
    background: lightblue !important;
}

背景色应用于
li
，因为
a
可能不会占据整个高度

.breadcrumb > li + li:before {
    content: "";   
    display: none;
}

这是为了隐藏由导入的样式表创建的伪元素而添加的

您不需要
浮动：左和
显示：内联块用于
li
和
a
。只有一个或另一个。也许这会引起问题。
.breadcrumb li:last-child {
    background: lightblue !important;
}

.breadcrumb > li + li:before {
    content: "";   
    display: none;
}