Question

我有HTML页，其中添加了许多标签，例如猫，狗，页等，并且我拥有CSS属性

 <html>
        <head>
            <style>
    	    label{
    		    text-transform: capitalize;
        	}
            </style>
        </head>
        <body>
            <label>Cat(s) : 5</label>
            <label>Dog(s) : 4</label>
        </body>
    </html>

在大多数浏览器上都可以正常工作，但是像chrome这样的浏览器会将（s）表示为大写（S），但事实并非如此。

在chrome和Firefox上检查https://codepen.io/vikramtalkin/pen/ZdeQmW，在Firefox上显示正确，但在chrome上显示（S）

请提出可能的解决方案。

Answer 1

使用CSS和现有的标记，最容易想到的是使用:first-letter。

使用:first-letter时，只会将大写label的首字母大写，而将s中的(s)保留为大写字母。

请注意，label必须显示block或inline-block

堆栈片段

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

<label>Cat(s) : 5</label>
<label>Dog(s) : 4</label>

<label>cow(s) : 5</label>
<label>horse(s) : 4</label>

修改

基于注释，其中可能不止一个单词。

在“我有狗”之类的句子中，不能大写任意单词，例如“我”和“狗”而不是“有”。为此，您需要一个脚本。

如果要大写所有单词，则不能使用:first-letter，如果要大写，则需要将应大写的文本换行，例如<span>，以免“（s）”中的“ s”受到影响（Chrome的运行方式）。

请注意，由于它也使用WebKit，因此它在Opera和Edge中的工作方式与在Chrome中相同，在Safari中也可能一样，因为它也使用WebKit，所以我猜它仅在FireFox中是不受影响。

用括号文字/内容大写问题

1 个答案: