css3学习笔记之文本效果

最新推荐文章于 2024-07-25 15:29:26 发布

weixin_30432007

最新推荐文章于 2024-07-25 15:29:26 发布

阅读量37

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/aiyoubucuoo/p/5435412.html

本文介绍了CSS3中处理文本的一些高级技巧，包括如何使用text-shadow属性为文本添加阴影效果，以及如何利用word-wrap属性实现自动换行，避免文本超出显示区域。此外，还概述了CSS3中新引入的文本处理属性及其用途。

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

<!DOCTYPE html>

< html >

< head >

< style >

h1

{

text-shadow: 5px 5px 5px #FF0000;

}

</ style >

</ head >

< body >

< h1 >Text-shadow effect!</ h1 >

< p >< b >Note:</ b > Internet Explorer 9 and earlier versions, does not support the text-shadow property.</ p >

</ body >

</ html >

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

<!DOCTYPE html>

< html >

< head >

< style >

p.test

{

width:11em;

border:1px solid #000000;

word-wrap:break-word;

}

</ style >

</ head >

< body >

< p class = "test"

> This paragraph contains a very long word: thisisaveryveryveryveryveryverylongword. The long word will break and wrap to the next line.</

p >

</ body >

</ html >

属性	描述	CSS
hanging-punctuation	规定标点字符是否位于线框之外。	3
punctuation-trim	规定是否对标点字符进行修剪。	3
text-align-last	设置如何对齐最后一行或紧挨着强制换行符之前的行。	3
text-emphasis	向元素的文本应用重点标记以及重点标记的前景色。	3
text-justify	规定当 text-align 设置为 "justify" 时所使用的对齐方法。	3
text-outline	规定文本的轮廓。	3
text-overflow	规定当文本溢出包含元素时发生的事情。	3
text-shadow	向文本添加阴影。	3
text-wrap	规定文本的换行规则。	3
word-break	规定非中日韩文本的换行规则。	3
word-wrap	允许对长的不可分割的单词进行分割并换行到下一行。	3