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 的内容要么是 link，要么只有文本. （并且没有任何特定顺序）我能以某种方式做到这一点，所以最后一个选项是模糊的，而不是像现在这样的图像 - 我尝试了一些其他带有边界三角形的例子，但它们也没有响应:-/

Answer 1

你能做什么？

不使用图像作为面包屑，而是使用 CSS
改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 并尝试调整结果大小 window

This is updated fiddle

css 面包屑分两行，响应式如何控制？

css breadcrumbs breaks into 2 lines, how to controll it in responsive?

css

jquery

moodle

breadcrumbs