#yyds干活盘点# 5 Css3 文本效果
Posted 江下下啊
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了#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：向文本添加阴影（代码）
<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：允许长单此换到下一行（代码）
<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 long long 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 long long long long long long long long long long long longlonglonglonglonglonglonglongtext</p>
</body>
</html>
3.text-overflow：当文本溢出包含元素时发生的事情（代码）
<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>
以上是关于#yyds干活盘点# 5 Css3 文本效果的主要内容，如果未能解决你的问题，请参考以下文章