css面包屑分为2行，如何控制响应？

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