如果文本多余一行歌溉，由于展示空間有限垄懂，故而有的時候需要超過一行顯示省略號的設置⊥炊猓可以使用text-overflow設置草慧。
語法：text-overflow: clip|ellipsis|string;
-
clip:修剪文本 -
ellipsis:顯示省略符號來代表被修剪的文本。 -
string:使用給定的字符串來代表被修剪的文本匙头。
使用注意事項：
- 要給容器定義寬度
- 要設置
overflow:hidden; - 要給相對應的文字設置：
white-space:nowrap - 還要設置
text-overflow:ellipsis多余的部分會以...的方式出現(xiàn)
下面給出一個帶hover效果的小demo
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>text-ellipsis的使用</title>
<style>
div.test{
width:200px;
white-space:nowrap;
overflow:hidden;
border:1px solid #000000;
}
div.test:hover{
text-overflow:inherit;
overflow:visible;
}
</style>
</head>
<body>
<p>鼠標移動到框內漫谷，查看效果.</p>
<div class="test" style="text-overflow:ellipsis;">如果超出會出現(xiàn)省略號，因為設置了text-overflow:ellipsis</div>
<br>
<div class="test" style="text-overflow:clip;">設置超出不會出現(xiàn)省略號蹂析，會直接截掉舔示，因為設置了text-overflow:clip</div>
</body>
</html>
