CSS3中包含几个新的文本特征。
在本章中您将了解以下文本属性：
- text-shadow
- box-shadow
- text-overflow
- word-wrap
- word-break
CSS3 的文本阴影
CSS3 中，text-shadow属性适用于文本阴影。
您指定了水平阴影，垂直阴影，模糊的距离，以及阴影的颜色：
<style>
h1
{
text-shadow: 5px 5px 5px #FF0000;
}
</style>
1. CSS3 box-shadow属性
CSS3 中 CSS3 box-shadow 属性适用于盒子阴影
div{ width:300px; height:100px; background-color:yellow; box-shadow: 10px 10px 5px #888888;}
接下来给阴影添加颜色
div {
box-shadow: 10px 10px 5px grey;
}
2. CSS3 Text Overflow属性
CSS3文本溢出属性指定应向用户如何显示溢出内容
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</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;">This is some long text that will not fit in the box</div>
<p>div 使用 "text-overflow:clip":</p>
<div class="test" style="text-overflow:clip;">This is some long text that will not fit in the box</div>
<p>div 使用自定义字符串 "text-overflow: >>"(只在 Firefox 浏览器下有效):</p>
<div class="test" style="text-overflow:‘>>‘;">This is some long text that will not fit in the box</div>
</body>
</html>
3. CSS3的换行
如果某个单词太长，不适合在一个区域内，它扩展到外面：
CSS3中，自动换行属性允许您强制文本换行 - 即使这意味着分裂它中间的一个字：
CSS代码如下：
p.test
{
width:11em;
border:1px solid #000000;
word-wrap:break-word;
}
CSS3 单词拆分换行
CSS3 单词拆分换行属性指定换行规则：
CSS代码如下：
p.test1
{
width:9em;
border:1px solid #000000;
word-break:keep-all;
}
p.test2
{
width:9em;
border:1px solid #000000;
word-break:break-all;
}
</style>
总结:
时间： 2024-10-20 18:56:32