text-shadow 文本阴影
text-shadow具有的属性和描述
| 属性 | 描述 |
|---|---|
| h-shadow | 必需。水平阴影的位置。允许负值。 |
| v-shadow | 必需。垂直阴影的位置。允许负值。 |
| blur | 可选。模糊的距离。 |
| color | 可选。阴影的颜色 |
text-shadow属性连接一个或更多的阴影文本。属性是阴影，指定的每2或3个长度值和一个可选的颜色值用逗号分隔开来。已失时效的长度为0
简写语法:
text-shadow: h-shadow v-shadow blur color;
示例
- 文字阴影模糊效果
代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文字阴影展示</title>
<style>
h1 {
text-shadow:2px 2px 8px #FF0000;}
</style>
</head>
<body>
<h1>无所不能的林大王</h1>
</body>
</html>
效果
- 白色文字上的文字阴影
代码
<html><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文字阴影展示</title>
<style>
h1
{
color:white;
text-shadow:2px 2px 4px #000000;
}
</style>
</head>
<body>
<h1>无所不能的林大王</h1>
</body>
</html>
效果
- 氖辉光文字阴影
代码
<html><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文字阴影展示</title>
<style>
h1
{
text-shadow:0 0 3px #FF0000;
}
</style>
</head>
<body>
<h1>无所不能的林大王</h1>
</body>
</html>
效果
Text-Overflow属性 控制溢出文本样式
CSS3文本溢出属性指定应向用户如何显示溢出内容
Text Overflow具有的属性和描述
| 属性 | 值 |
|---|---|
| clip | 修剪文本 |
| ellipsis | 显示省略符号来代表被修剪的文本 |
| string | 使用给定的字符串来代表被修剪的文本 |
简写语法
text-overflow: clip|ellipsis|string;
示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>text-overflow</title>
<style>
div.test
{
white-space:nowrap;
width:12em;
overflow:hidden;
border:1px solid #000000;
}
</style>
</head>
<body>
<p>以下 div 容器内的文本无法完全显示，可以看到它被裁剪了。</p>
<p>div 使用 "text-overflow:ellipsis":</p>
<div class="test" style="text-overflow:ellipsis;">哈哈哈! 林大王上天入地无所不能</div>
<p>div 使用 "text-overflow:clip":</p>
<div class="test" style="text-overflow:clip;">哈哈哈! 林大王上天入地无所不能</div>
<p>div 使用自定义字符串 "text-overflow: >>"(只在 Firefox 浏览器下有效):</p>
<div class="test" style="text-overflow:'>>';">哈哈哈! 林大王上天入地无所不能</div>
</body>
</html>
效果
word-wrap 属性 控制文本换行
word-wrap具有的值和描述
| 值 | 描述 |
|---|---|
| normal | 只在允许的断字点换行（浏览器保持默认处理）。 |
| break-word | 在长单词或 URL 地址内部进行换行 |
语法
word-wrap: normal|break-word;
示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>word-wrap文本折行</title>
<style>
p.test
{
width:11em;
border:1px solid #000000;
word-wrap:break-word;
}
</style>
</head>
<body>
<p class="test">世界是你们的，也是我们的，但是归根结底是你们的。你们青年人朝气蓬勃，正在兴旺时期，好像早晨八九点钟的太阳。希望寄托在你们身上！</p>
</body>
</html>
效果
扫描二维码关注公众号，回复：
12560169 查看本文章
其他文本属性
| 属性 | 值 |
|---|---|
| hanging-punctuation | 规定标点字符是否位于线框之外 |
| punctuation-trim | 规定是否对标点字符进行修剪 |
| text-align-last | 设置如何对齐最后一行或紧挨着强制换行符之前的行 |
| text-emphasis | 向元素的文本应用重点标记以及重点标记的前景色 |
| text-justify | 规定当 text-align 设置为 “justify” 时所使用的对齐方法 |
| text-outline | 规定文本的轮廓 |
| text-overflow | 规定当文本溢出包含元素时发生的事情 |
| text-shadow | 向文本添加阴影 |
| text-wrap | 规定文本的换行规则 |
| word-break | 规定非中日韩文本的换行规则 |
| word-wrap | 允许对长的不可分割的单词进行分割并换行到下一行 |