CSS实现英文或拼音单词首字母大写

最新推荐文章于 2021-08-04 08:15:27 发布

辛苦的码农20200609

最新推荐文章于 2021-08-04 08:15:27 发布

阅读量907

点赞数

分类专栏：前端

原文链接：https://www.mk2048.com/blog/blog_h20caaja2i0j.html

版权

前端专栏收录该内容

785 篇文章 4 订阅

订阅专栏

CSS实现英文或拼音单词首字母大写，只需要在css样式中加入：

text-transform: capitalize

即可。

测试代码如下：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>英文或拼音单词首字母大写</title>
<style>
.shou_daxie {
    text-transform: capitalize
}
.quan_daxie {
    text-transform: uppercase
}
.quan_xiaoxie {
    text-transform: lowercase
}
</style>
</head>

<body>
<div class="shou_daxie"> 首字母大写:&nbsp;&nbsp;the bus will depart at the scheduled time regardless of latecomers</div>
<div class="quan_daxie"> 字母全实现大写:&nbsp;&nbsp;tHe Bus wIll dePart at the scHeduled Time rEgardless of latecomers</div>
<div class="quan_xiaoxie"> 字母全实现小写:&nbsp;&nbsp;tHe Bus wIll dePart at the scHeduled Time rEgardless of latecomers</div>
</body>
</html>

结果如下：

首字母大写:  The Bus Will Depart At The Scheduled Time Regardless Of Latecomers
字母全实现大写:  THE BUS WILL DEPART AT THE SCHEDULED TIME REGARDLESS OF LATECOMERS
字母全实现小写:  the bus will depart at the scheduled time regardless of latecomers

优惠劵

辛苦的码农20200609

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS实现英文或拼音单词首字母大写

CSS实现英文或拼音单词首字母大写，只需要在css样式中加入：text-transform: capitalize即可。测试代码如下：<!doctype html><html><head><meta charset="utf-8"><title>英文或拼音单词首字母大写</title><style>.shou_daxie { text-transform: capitalize}.qua
复制链接

扫一扫