时间戳

首页 > 解决方案 > 大写括号文本/内容的问题

css - 大写括号文本/内容的问题

问题描述

我有一个HTML页面，我在其中添加了许多标签，例如 Cat(s)、Dog(s)、Page(s) 等，并且我拥有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）

请提出可能的解决方案。

标签： css

解决方案

使用 CSS 和现有标记，想到的最简单的方法是使用:first-letter.

使用:first-letter它只会将label's 中的第一个字母大写，而将sin保留(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>

编辑

根据评论，可能不止一个词。

在像“i have dog(s)”这样的句子中，不能将任意单词大写，例如“I”和“Dog”，但不能将“have”。为此，您需要一个脚本。

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

请注意，它在 Opera 和 Edge 中的工作方式与在 Chrome 中的工作方式相同，并且可能在 Safari 中也是如此，因为它也使用 WebKit，所以我猜它仅在 FireFox 中“（s）”不受影响.

推荐阅读