CSS3（5）文本效果

CSS3 文本效果

CSS3中包含几个新的文本特征。

在本章中您将了解以下文本属性：

• text-shadow  文本阴影
• box-shadow  盒子阴影
• text-overflow  文本溢出
• word-wrap  单词拆分换行
• word-break

CSS3 的文本阴影

CSS3 中，text-shadow属性适用于文本阴影。

效果展示

 代码：

style="text-shadow: 5px 5px 2px #ff0000;"

CSS3 Text Overflow属性

CSS3文本溢出属性指定应向用户如何显示溢出内容

style="border: 2px solid #000000; white-space: nowrap; width: 100px; overflow: hidden; text-overflow: clip;"

abcdefghijklmnopqrstuvwxyz

style="border: 2px solid #000000; white-space: nowrap; width: 100px; overflow: hidden; text-overflow: ellipsis;"

abcdefghijklmnopqrstuvwxyz

 style="border: 2px solid #000000; white-space: nowrap; width: 100px; overflow: hidden; text-overflow: '***';"

abcdefghijklmnopqrstuvwxyz

 

CSS3的换行

如果某个单词太长，不适合在一个区域内，它扩展到外面：

CSS3中，自动换行属性允许您强制文本换行 - 即使这意味着分裂它中间的一个字：

这是一个很长的单词：fjdljflsjdflksdjfjdlfjdlf

 

 

 

代码：

style="float: left; width: 120px; border: 1px solid #000; word-wrap: break-word;"

CSS3 单词拆分换行

CSS3 单词拆分换行属性指定换行规则：

style="border: 1px solid #000; width: 100px; height: 100px; word-break: keep-all;"

This paragraph contains some text. This line will-break-at-hyphenates.

 style="border: 1px solid #000; width: 100px; height: 100px; word-break: break-all;"

This paragraph contains some text: The lines will break at any character.