gpt4 book ai didi

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

转载 作者:太空宇宙 更新时间:2023-11-03 21:03:39 24 4
gpt4 key购买 nike

我有 HTML我在其中添加了许多标签的页面,例如 Cat(s)、Dog(s)、Page(s) 等,我有 CSS他们的属性(property)作为

 <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),但事实并非如此。

检查 https://codepen.io/vikramtalkin/pen/ZdeQmW在 chrome 和 firefox 上,在 firefox 上它显示正确但在 chrome 上它显示 (S)

请提出可能的解决方案。

最佳答案

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

:first-letter它只会将 label 中的第一个字母大写的,并留下 s(s)是。

请注意,label需要显示blockinline-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)”这样的句子中,不能将任意单词大写,例如“我”和“狗”但不是“有”。为此,您需要一个脚本。

如果要全部大写,不能用:first-letter ,如果是这样,您需要将应该大写的文本换行,例如一个<span> , 以避免 "(s)"中的 "s"受到影响(Chrome 的做法)。

请注意,它在 Opera 和 Edge 中的工作方式与在 Chrome 中的工作方式相同,并且可能在 Safari 中也是如此,因为它也使用 WebKit,所以我猜它只在 FireFox 中是“(s)” '受影响。

关于css - 大写括号文本/内容的问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56701623/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com