#yyds干活盘点# 5 Css3 文本效果

春衣少年当酒歌，起舞四顾以笑和。这篇文章主要讲述#yyds干活盘点# 5 Css3 文本效果相关的知识，希望能为你提供帮助。
一、Css3文本效果1.text-shadow：向文本添加阴影

Text-shadow的属性：

值	说明
h-shadow	必需，水平阴影的位置，允许负值
v-shadow	必需，垂直阴影的位置，允许负值
blur	可选，模糊距离
color	可选，阴影的颜色

2.word-wrap：允许长单此换到下一行

Word-wrap的属性

值	说明
normal	只在允许的断字点换行（浏览器保持默认处理）
break-word	在长单词或URL地址内部进行换行

3.text-overflow：当文本溢出包含元素时发生的事情

Text-overflow的属性

属性	值	说明
white-space	nowrap	文本不会换行，在同一行继续
overflow	hidden	溢出隐藏
text-overflow	ellipeis	用省略号来代表被修剪的文本

二、代码及页面展示1.text-shadow：向文本添加阴影（代码）

< !DOCTYPE html>
< html lang="en">
< head>
< meta charset="UTF-8">
< title> Css3-TextShadow< /title>
< style>
h1
text-shadow:5px 5px gray;

< /style>

< /head>
< body>
< h1> Hello,text-shadow< /h1>
< /body>
< /html>

2.word-wrap：允许长单此换到下一行（代码）

< !DOCTYPE html>
< html lang="en">
< head>
< meta charset="UTF-8">
< title> WordWrap< /title>
< style>
p
width: 200px;
border:1px skyblue solid;

p:last-child
word-wrap:break-word;

< /style>
< /head>
< body>
< p> This is a long long long long long long long long long long long long long longlong long long long long long long long long long longlonglonglonglonglonglonglongtext< /p>
< p> This is a long long long long long long long long long long long long long longlong long long long long long long long long long longlonglonglonglonglonglonglongtext< /p>
< /body>
< /html>

3.text-overflow：当文本溢出包含元素时发生的事情（代码）

< !DOCTYPE html>
< html lang="en">
< head>
< meta charset="UTF-8">
< title> TextOverflow< /title>
< style>
h2
width: 150px;
line-height: 50px;
border:1px lightpink solid;

.hh
white-space: nowrap;

#hh
white-space: nowrap;
overflow: hidden;

#hhh
white-space: nowrap;
overflow: hidden;
text-overflow:ellipsis;

< /style>
< /head>
< body>
< h2 > 好好学前端，秃头不是梦< /h2>
< h2 class="hh"> 好好学前端，秃头不是梦< /h2>
< h2 id="hh"> 好好学前端，秃头不是梦< /h2>
< h2 id="hhh"> 好好学前端，秃头不是梦< /h2>
< /body>
< /html>