如何在没有 js/jquery 的情况下为移动版包装 LI 标签文本

Question

我正在为我的网站设置面包屑导航。其中有以下 UI。

此处 "My Account" 位于单独的 "li" 标签中。 “/查看我的订单历史记录/订单号 0005073140”位于单独的 "li" 标签中。我需要有以下格式

如果我删除“/ Order# 0005073140”文本，那么 "My Account / View My Order History" 会变成一行。由于此问题是针对移动版本的，因此我只需要为移动版本设置此包装。

如果我删除 DIV 标签的宽度，整个文本将设置为一行，如下所示。

它看起来不太好，因为它触及了手机的边缘（使用 chrome 开发工具拍照）。

由于这是针对响应式设计的，因此我只需要为移动版设计。非常感谢您的帮助。

原代码在这里

.breadcrumb {
    background-color: transparent;
}

.breadcrumb {
    padding: 8px 15px;
    margin-bottom: 20px;
    list-style: none;
    background-color: #f5f5f5;
    border-radius: 4px;
}
.container {
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}
ul, ol {
    margin-top: 0;
    margin-bottom: 10px;
}
body {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 14px;
    line-height: 1.42857143;
    color: #333;
    background-color: #fff;
}

<div class="container">
            <ol class="breadcrumb">
                
                <li>
                    <a href="/MyAccount/Index">My Account</a>
                </li>
                
                <li class="active">
                            <a href="/MyAccount/OrderHistory">View My Order History</a>  / Order# 0005073140

                </li>

            </ol>
        </div>

Answer 1

我不确定你想要的输出。我不清楚。

您可以将文本放在自己的 <li> 中，如下所示：

....

<li class="active">
  <a href="/MyAccount/OrderHistory">View My Order History</a>
</li>

<li>Order# 0005073140</li>

然后添加以下CSS规则来处理它们，如下所示：

.breadcrumb li {
  display: inline-block;
  white-space: nowrap;
}

.breadcrumb li:after {
    content: '/';
}

参见运行演示：

.breadcrumb {
  background-color: transparent;
}

.breadcrumb {
  padding: 8px 15px;
  margin-bottom: 20px;
  list-style: none;
  background-color: #f5f5f5;
  border-radius: 4px;
}

.container {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

ul,
ol {
  margin-top: 0;
  margin-bottom: 10px;
}

.breadcrumb li {
  display: inline-block;
  white-space: nowrap;
}

.breadcrumb li:after {
    content: '/';
}

body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.42857143;
  color: #333;
  background-color: #fff;
}

<div class="container">
  <ol class="breadcrumb">

    <li>
      <a href="/MyAccount/Index">My Account</a>
    </li>

    <li class="active">
      <a href="/MyAccount/OrderHistory">View My Order History</a>
    </li>

    <li>Order# 0005073140</li>

  </ol>
</div>

如何在没有 js/jquery 的情况下为移动版包装 LI 标签文本

How to wrap LI tag text for mobile version without js/jquery

breadcrumbs

twitter-bootstrap