将标签元素的首字母大写

Question

我正在获取一些外部html页面，其中所有数据都以小写形式输入。 使用CSS，我尝试将完整标签标签的首字母大写，但我无法做到这一点，它使完整的大写字母如下：

.fontmodal {
     text-transform:capitalize !important;
}

但这没有用...

<table><fieldset><div><label>DATA</label></div></fieldset></table> -这是当前结构

现在我正在尝试在jquery中相同，我不确定什么以及如何进行。

这是我正在尝试的代码：

$('#Container2').find("table>label").css(textTransform,'capitalize');

Answer 1

见下文：

 label { text-transform: lowercase; } div::first-letter { text-transform: uppercase; }

 <table> <fieldset> <div> <label>DATA</label> </div> </fieldset> </table>

Answer 2

如果您无法更改HTML，并且需要在第一个字母上使用大写字母，则需要更改<label>标签的默认显示属性：

：首字母：

仅对显示值为block，inline-block，table-cell，list-item或table-caption的元素起作用。 在所有其他情况下，:: first-letter无效。 （源MDN ）

 label { display: inline-block; text-transform: lowercase; } label::first-letter { text-transform: capitalize; }

 <table> <fieldset> <div> <label>DATA</label> </div> </fieldset> </table>

Answer 3

您可以简化它，并执行以下操作。

 $(document ).ready(function() { $("label").addClass("capitalizer"); // Adjust specificity as needed });

 .capitalizer { font-weight: bold; font-size: 72px; display: inline-block; color: red; } .capitalizer::first-letter { text-transform: capitalize; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div> <label>data</label> </div>

注意：我更喜欢.addClass，因为.CSS将内联css添加到HTML中，这是不可取的。

Answer 4

您可以使用CSSS选择器:first-letter实现此目的。

我发现的微妙之处是<label/>标记似乎不支持它（无论如何在我的演示代码中不起作用）

但是我们可以解决：

label {
    text-transform: lowercase;
}
div:first-child:first-letter {
    text-transform: uppercase;
    color: red;
}

Answer 5

我没有发现什么错，一个简单的CSS规则就可以解决问题：

#Container2 label {
  text-transform: capitalize;
}