html - 如何将面包屑中的文本大写？

Question

这是包含 bootstrap 的 breadcrumb 的 html，

.breadcrumb {
  margin-top: 0;
  margin-bottom: 0;
  padding: 8px 15px 0 35px;
}

.breadcrumb>li {
  display: inline-block;
  text-transform: lowercase;
  font-size: 11px;
}

.breadcrumb>li+li:before {
  content: "\3E";
  color: #b1afaf;
  font-weight: bold;
}

<ul class="breadcrumb">
  <li><a href="#">MEP SERVICES </a></li>
  <li><a href="#">Electrical</a></li>
  <li><a href="#">Lighting</a></li>
  <li>HT &amp; LT</li>
</ul>

现在它的外观和感觉是，

我想要下面的外观和感觉。

我在 css 下尝试过，但没有用。

.breadcrumb>li {
  display: inline-block;
  text-transform: uppercase;
  font-size: 11px;
}

Answer 1

在 a

中使用 text-transform: capitalize;

.breadcrumb {
  margin-top: 0;
  margin-bottom: 0;
  padding: 8px 15px 0 35px;
}

.breadcrumb>li {
  display: inline-block;
  font-size: 11px;
}

.breadcrumb>li+li:before {
  content: "\3E";
  color: #b1afaf;
  font-weight: bold;
}

.breadcrumb>li>a {
  text-transform: capitalize;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<ul class="breadcrumb">
  <li><a href="#">mep services</a></li>
  <li><a href="#">electrical</a></li>
  <li><a href="#">lighting</a></li>
  <li>HT &amp; LT</li>
</ul>

如果你真的想让 MEP SERVICES 在 html 中完全大写，那么你需要更多的代码:

.breadcrumb {
  margin-top: 0;
  margin-bottom: 0;
  padding: 8px 15px 0 35px;
}

.breadcrumb>li {
  display: inline-block;
  font-size: 11px;
}

.breadcrumb>li+li:before {
  content: "\3E";
  color: #b1afaf;
  font-weight: bold;
}

.breadcrumb>li>a {
  text-transform: capitalize;
}

.breadcrumb>li:first-of-type>a {
  text-transform: lowercase;
}

.breadcrumb>li:first-of-type>a:first-letter {
  text-transform: capitalize;
}
 /* for ::first-letter work `a` needs to be block level element */
.breadcrumb>li>a {
  display: inline-block;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<ul class="breadcrumb">
  <li><a href="#">MEP SERVICES</a></li>
  <li><a href="#">electrical</a></li>
  <li><a href="#">lighting</a></li>
  <li>HT &amp; LT</li>
</ul>