首页 >web前端 >css教程 >如何使用'文本转换:大写”而不影响全部大写单词?

如何使用'文本转换:大写”而不影响全部大写单词?

Susan Sarandon
Susan Sarandon原创
2024-11-17 16:21:01720浏览

How Can I Use `text-transform: capitalize` Without Affecting All-Caps Words?

覆盖 CSS 文本转换:所有大写文本大写

问题:

利用 CSS 的文本转换:大写;当这些单词的首字母本质上需要大写时,例如专有名词或首字母缩略词,将全大写文本转换为句子大小写的规则会出现问题。

如以下代码片段所示,“Small”的所需输出大写字母和全部大写字母”不是实现:

HTML:

<a href="#" class="link">small caps</a> &amp; 
<a href="#" class="link">ALL CAPS</a>

CSS:

.link {text-transform: capitalize;}

结果:

Small Caps & ALL CAPS

解决方案:

至在保持文本转换的同时实现所需的大写行为:大写;规则,可以实现以下 CSS:

.link {
  text-transform: lowercase;
}
.link:first-letter,
.link:first-line {
  text-transform: uppercase;
}

此修改首先将所有文本转换为小写,然后将每个单词的第一个字母和文本的第一行重新大写。

结果:

Small Caps
All Caps

以上是如何使用'文本转换:大写”而不影响全部大写单词?的详细内容。更多信息请关注PHP中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn