CSS Text-Effects属性

CSS Text-Effects属性用于在文本上创建视觉效果。下面列出了一些最常用的CSS Text-Effects属性。

text-shadow

text-shadow属性用于在文本下方添加阴影效果。此属性的值是由4个长度值（x坐标，y坐标，模糊半径，阴影颜色）组成的列表。

示例：

h1 {
  text-shadow: 1px 1px 2px black;
}

此示例将在h1元素下方添加一个黑色的、横向偏移量为1px，纵向偏移量为1px，模糊半径为2px的阴影效果。

text-overflow

text-overflow属性用于控制文本溢出时的行为。默认情况下，当文本溢出时，溢出部分会被隐藏。如果将text-overflow设置为“ellipsis”，则文本溢出时将显示省略号。

示例：

h1 {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

此示例将在h1元素中强制文本不换行，当文本超出h1元素的边界时将文本裁剪，并显示省略号。

text-transform

text-transform属性用于控制文本的大小写格式。该属性可以接受4个值：

• none：不需要转换
• capitalize：将每个单词的首字母转换为大写
• uppercase：将所有字符转换为大写
• lowercase：将所有字符转换为小写

示例：

h1 {
  text-transform: uppercase;
}

此示例将h1元素中的所有文本转换为大写字母。

word-wrap

word-wrap属性用于控制文本中长单词的换行方式。默认情况下，当单个单词超出其容器时，单词不会换行。如果将word-wrap设置为“break-word”，则单词会被打断并分成两行。

示例：

p {
  word-wrap: break-word;
}

此示例将在所有p元素中启用单词折行，当单个单词太长而无法放在容器中时，单词将被打断并分成两行。

以上就是CSS Text-Effects属性的一些基本用法。请注意，还有许多其他text效果属性可供使用，例如letter-spacing、line-height和text-decoration。