1、text-overflow 與word-wrap
text-overflow用來設置是否使用一個省略標記（...）標示對象内文本的溢出。
語法：
但是text-overflow只是用來說明文字溢出時用什麽方式顯示，要實現溢出時産生省略號的效果，還須定義強制文本在一行内顯示（white-space:）及溢出内容爲隱藏（overflow:hidden），只有這樣才能實現溢出文本顯示省略號的效果，代碼如下：
text-overflow:ellipsis; overflow:hidden; white-space:;
同時，word-wrap也可以用來設置文本行爲，當前行超過指定容器的邊界時是否斷開轉行。
語法：
normal爲瀏覽器默認值，break-word設置在長單詞或 URL地址内部進行換行，此屬性不常用，用瀏覽器默認值即可。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>text-overflow</title>
<style type="text/css">
.test_demo{
text-overflow:ellipsis;
overflow:hidden;
white-space:;
width:200px;
background:#ccc;
}
</style>
</head>
<body>
<div class="test_demo">
超酷的IT技術學習平台（我是省略號）
</div>
</body>
</html>
2、嵌入字體@font-face
@font-face
能夠加載服務器耑的字體文档，讓瀏覽器耑可以顯示用戶電腦裡沒有安裝的字體。
語法：
@font-face {
font-family : 字體名稱;
src : 字體文档在服務器上的相對或絕對路徑;
}這樣設置之後，就可以像使用普通字體一樣在（font-*）中設置字體樣式。
比如：
p {
font-size :12px;
font-family : "My Font";
/*必須項，設置@font-face中font-family同樣的值*/
}注：font-family計算機自帶字體文档名稱大概包括以下幾種：
Simsun
SimHei
Microsoft YaHei
Arial
Helvetica
Helvetica Neue
（url正常情況下不需要）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>嵌入字體</title>
<style type="text/css">
@font-face {
font-family: "MOOC Font";
src: url("http://www.wkwkk.com/Amaranth-BoldItalic.otf");
}
.demo {
width: 340px;
padding: 30px;
color: #566F89;
background: #000;
font-size:58px;
font-family: "MOOC Font";
}
</style>
</head>
<body>
<div class="demo">聞課</div>
</body>
</html>
3、文本隂影text-shadow
text-shadow可以用來設置文本的隂影效果。
語法：
text-shadow: X-Offset Y-Offset blur color;
X-Offset：表示隂影的水平偏移距離，其值爲正值時隂影向右偏移，反之向左偏移；
Y-Offset：是指隂影的垂直偏移距離，如果其值是正值時，隂影向下偏移，反之向上偏移；
Blur：是指隂影的模糊程度，其值不能是負值，如果值越大，隂影越模糊，反之隂影越清晰，如果不需要隂影模糊可以將Blur值設置爲0；
Color：是指隂影的顔色，其可以使用rgba色。
比如，我們可以用下面代碼實現設置隂影效果。
text-shadow: 0 1px 1px #fff
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>text-shadow</title>
<style type="text/css">
.demo {
width: 340px;
padding: 30px;
font: bold 55px/100% "微軟雅黑";
background: #C5DFF8;
text-shadow: 2px 2px 0 red;
}
</style>
</head>
<body>
<div class="demo">聞課</div>
</body>
</html>
