text-shadow
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css3文本</title>
<style type="text/css">
* {
margin: ;
padding: ;
} h1 {
text-shadow: 5px 5px 5px red; /*x轴,y轴,模糊程度,颜色*/
}
</style>
</head>
<body>
<h1>Marvel Comics</h1>
</body>
</html>
效果如下：
CSS3文本溢出属性指定应向用户如何显示溢出内容
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css3文本效果</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
} div.test {
width: 12em;
white-space: nowrap; /*文本显示在一行*/
overflow: hidden; /*超出文本的区域隐藏掉*/
border: 1px solid #000;
}
</style>
</head>
<body>
<div class="test" style="text-overflow: ellipsis;">
This is some long text that will not fit in the box
</div> <div class="test">
This is some long text that will fit in the box
</div> <div class="test" style="text-overflow: '>>'">
This is some long text that will fit in the box
</div>
</body>
</html>
效果如下：
clip：默认
ellipsis:文本溢出显示省略号
text-overflow: '>>'：只在火狐浏览器下有效
如果某个单词太长，不适合在一个区域内，它扩展到外面：
CSS3中，自动换行属性允许您强制文本换行 - 即使这意味着分裂它中间的一个字：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css3文本效果</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
} .test {
width: 11em;
border: 1px solid #000;
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>
效果如下：
没加换行之前效果如下：
CSS3 单词拆分换行属性指定换行规则：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文本效果</title>
<style>
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>
</head>
<body> <p class="test1"> This paragraph contains some text. This line will-break-at-hyphenates.</p>
<p class="test2"> This paragraph contains some text: The lines will break at any character.</p> <p><b>注意:</b> word-break 属性不兼容 Opera.</p> </body>
</html>
效果如下：
word-wrap的break-word是沿用浏览器默认的换行方式，因此“Ooops too”后面空出了一段空白，右图word-break的break-all是改变浏览器默认的换行方式，让浏览器无视半角空格，直接根据容器尺寸换行，因此遇到长单词时，直接断词换行。效果上看
word-break: break-all;比word-wrap: break-word;更节省页面空间。