时间戳

首页 > 解决方案 > 为什么 Css 文本转换大写不起作用？

css - 为什么 Css 文本转换大写不起作用？

问题描述

我有一个示例文本，全部大写。我想让它大写文本，但 css text-transform 不起作用。我怎样才能做到这一点？

span,
a,
h2 {
  text-transform: capitalize !important;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>

<span class="ml-5 mt-5 d-block">IT IS AN EXAMPLE TEXT</span>

<h2><a class="ml-5 mt-5 d-block" href="#">IT IS AN EXAMPLE TEXT IN HREF</a></h2>

你可以检查JSFiddle

我想要所有单词的首字母大写，其他小写字母。像这样：

It Is An Example Text

标签： csscapitalize

解决方案

大写仅影响单词的第一个字母。它不会改变单词中其余字母的大小写。例如，如果您将一个已经全部大写的单词大写，则该单词中的其他字母不会切换为小写。当您的文本包含不应包含任何小写字母的首字母缩写词或缩写时，这很好。

如果您将提供的文本更改为小写，您会发现它工作得很好！

但是要完整回答，无论输入如何，我都会尝试找到一种以所需方式进行资本化的方法。

似乎仅使用 CSS 是不可能的，如果您没有将每个单词包装在不同的元素中，那么除了单个单词文本之外。

单字片段

span,
a,
h2 {
   text-transform:lowercase
}

span:first-letter,
a:first-letter,
h2:first-letter {
  text-transform: capitalize;
}

推荐阅读