CSS面包屑分为两行，如何控制它的响应？

Question

我有一个面包屑列表，它看起来像这样：

但是如果步骤太多或者在分辨率较低的设备上查看它就会崩溃并且变得丑陋，如下所示：

我的代码是这样的：

ul.breadcrumb li { 
padding-left: 5px;
}
ul.breadcrumb li::after {
  display: inline-block;
  color: #959fa5;
}
ul.breadcrumb li::after {
  content: '';
  height: 25px;
  width: 12px;
  background: url(/theme/base/pix/grey-white-grey2.png) no-repeat center center;
  vertical-align: middle;
}
ul.breadcrumb li {
  background-color:@color-gery-background;
}
ul.breadcrumb li:nth-last-child(2):after {
  content: '';
  height: 25px;
  width: 12px;
  margin-right: 0px;
  background: url(/theme/base/pix/grey-white-blue.png) no-repeat center center;
  vertical-align: middle;
}
ul.breadcrumb li:last-child{
  background-color: @color-blue;
  text-shadow: none;
  color: white!important;
}
ul.breadcrumb li:last-child a,
ul.breadcrumb li:last-child span
{
  text-shadow: none;
  color: white!important;
}
ul.breadcrumb li:last-child:after
 {
  content: ' ';
  height: 25px;
  width: 12px;
  vertical-align: middle;
  background: url(/theme/base/pix/blue-whitey.png) no-repeat center center;
}
ul.breadcrumb li > *:last-child::before,
.cd-multi-steps.custom-icons li > *::before {
  content: ' ';
  height: 25px;
  width: 12px;
  vertical-align: middle;
  background: url(/theme/base/pix/blue-whitey.png) no-repeat center center;
}

和 HTML

<ul class="breadcrumb">
  <li><a href="#">My home</a></li>
  <li><span>some text</span></li>
  <li><a href="#">Some link</a></li>
</ul>

而且由于我正在使用moodle，因此我无法在li 上设置更多类，而li 的内容要么是链接，要么只是带有文本的跨度。 （并且没有任何特定的顺序） 我可以以某种方式使它成为最后一个选项，而不是像现在这样的图像 - 我尝试了一些其他带有边界三角形的示例，但它们也没有响应：-/

Answer 1

你能做什么？

1. 不要使用图像作为面包屑，而是使用 CSS
2. 更改小屏幕上的 CSS，使其不难看。

喜欢，

/* some breadcrumb basic code */

@media only screen and (max-width : 766px) {
    ... code for small devices ...
}

@media only screen and (min-width : 767px) {
    ... code for large devices ...
}

Check this fiddle 并尝试调整结果窗口的大小

This is updated fiddle