CSS 文本转换

text-transform 属性用于控制文本的大小写转换。

语法

css

text-transform: [值];

取值

none：默认值，不进行任何转换
capitalize：首字母大写（每个单词的第一个字母大写）
uppercase：全部大写
lowercase：全部小写
full-width：将字符转换为全角形式
full-size-kana：将假名转换为全角形式（主要用于日语）

示例

css

.normal-text {
  text-transform: none;
}

.capitalize-text {
  text-transform: capitalize;
}

.uppercase-text {
  text-transform: uppercase;
}

.lowercase-text {
  text-transform: lowercase;
}

.full-width-text {
  text-transform: full-width;
}

实际应用

标题样式：将标题转换为全部大写或首字母大写
导航菜单：统一导航项的大小写格式
按钮文本：将按钮文本转换为全部大写
表单输入：规范用户输入的文本格式
品牌名称：确保品牌名称始终以正确的大小写显示

最佳实践

保持一致性：在整个网站中保持文本大小写转换的一致性
考虑可读性：全部大写的文本可读性较差，应避免在长段落中使用
语义化：使用 CSS 控制文本大小写，而不是在 HTML 中直接写大写或小写文本，这样更便于维护
注意语言差异：某些语言（如德语）的大写规则与英语不同，应根据目标语言调整使用
浏览器兼容性：full-width 和 full-size-kana 可能在某些旧浏览器中不被支持— title: CSS 文本转换

CSS 文本转换

text-transform 属性用于控制文本的大小写转换。

语法

css

text-transform: [值];

取值

none：默认值，不进行任何转换
capitalize：首字母大写（每个单词的第一个字母大写）
uppercase：全部大写
lowercase：全部小写
full-width：将字符转换为全角形式
full-size-kana：将假名转换为全角形式（主要用于日语）

示例

css

.normal-text {
  text-transform: none;
}

.capitalize-text {
  text-transform: capitalize;
}

.uppercase-text {
  text-transform: uppercase;
}

.lowercase-text {
  text-transform: lowercase;
}

.full-width-text {
  text-transform: full-width;
}

实际应用

标题样式：将标题转换为全部大写或首字母大写
导航菜单：统一导航项的大小写格式
按钮文本：将按钮文本转换为全部大写
表单输入：规范用户输入的文本格式
品牌名称：确保品牌名称始终以正确的大小写显示

最佳实践

保持一致性：在整个网站中保持文本大小写转换的一致性
考虑可读性：全部大写的文本可读性较差，应避免在长段落中使用
语义化：使用 CSS 控制文本大小写，而不是在 HTML 中直接写大写或小写文本，这样更便于维护
注意语言差异：某些语言（如德语）的大写规则与英语不同，应根据目标语言调整使用
浏览器兼容性：full-width 和 full-size-kana 可能在某些旧浏览器中不被支持