CSS Text Effects

我们可以在 HTML 文档中应用的文本上实现不同的效果。可以使用一些属性来为文本添加效果。

使用 CSS，我们可以为网页文档设置样式并影响文本。文本效果属性有助于使文本更具吸引力和清晰度。CSS 中有一些文本效果属性，如下所示：CSS

• word-break
• text-overflow
• word-wrap
• writing-mode

下面我们结合图解来讨论上述 CSS 属性。

word-break

它指定了单词在行尾如何断开。它定义了换行规则。

语法

此属性的默认值为 normal。因此，当我们不指定任何值时，会自动使用此值。

值

keep-all： 它会以默认样式断开单词。

break-all： 它会在字符之间插入单词断点，以防止单词溢出。

示例

word-wrap

CSS word-wrap 属性用于断开长单词并将其换到下一行。此属性用于在无法断开的字符串太长而无法放入容器框时防止溢出。

语法

值

normal： 此属性用于仅在允许的断点处断开单词。

break-word： 用于断开无法断开的单词。

initial： 用于将此属性设置为其默认值。

inherit： 它从其父元素继承此属性。

示例

text-overflow

它指定了用户不可见的溢出文本的表示。它向用户发出有关不可见内容的信号。此属性帮助我们决定文本是否应被裁剪或显示某些点（省略号）。

此属性不能单独使用。我们必须与此属性一起使用 **white-space: nowrap;** 和 **overflow: hidden;**。

语法

属性值

clip： 这是默认值，它会裁剪溢出的文本。

ellipsis： 此值显示一个省略号（...）或三个点来表示裁剪的文本。它显示在区域内，减少文本量。

示例

writing-mode

它指定文本是水平还是垂直书写。如果书写方向是垂直的，那么它可以是 **从左到右 (vertical-lr)** 或 **从右到左 (vertical-rl)**。

语法

属性值

horizontal-tb： 这是此属性的默认值，文本沿水平方向，从左到右、从上到下阅读。

vertical-rl： 它以垂直方向显示文本，文本从右到左、从上到下阅读。

vertical-lr： 它类似于 vertical-rl，但文本是从左到右阅读的。

示例