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

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

Susan Sarandon
发布: 2024-11-17 16:21:01
原创
709 人浏览过

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中文网其他相关文章!

来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板