text-overflow:ellipsis的巧妙運用
關鍵字: text-overflow:ellipsis
語法：text-overflow : clip | ellipsis
取值：
clip ：預設值 。不顯示省略標記(…)，而是簡單的裁切.
ellipsis： 當物件內文字溢位時顯示省略標記(…).
可惜text-overflow 還只是ie的私有屬性而已，也沒被收錄到w3c標準裡 .
如果想讓某個容器（div或者li或者…塊級元素）顯示一行文字，當文字內容過多時，不換行，而是出現…
這樣寫：例如
Html程式碼
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 注意：overflow: hidden; text-overflow:ellipsis;white-space:nowrap;一定要一起用
1.一定要給容器定義寬度.
2.如果少了overflow: hidden;文字會橫向撐到容易的外面
3.如果少了white-space:nowrap;文字會把容器的高度往下撐；即使你定義了高度，省略號也不會出現，多餘的文字會被裁切掉
4.如果少了text-overflow:ellipsis;多餘的文字會被裁切掉，就相當於你這樣定義text-overflow:clip.
如果容器是table，當文字內容過多時，不換行，而是出現…
這樣寫：例如
Html程式碼
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
table{table-layout:fixed;width:106px;}
td{padding:2px 3px;border:1px solid #000;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
</style>
</head>
<body>
<table cellspacing="0" cellpadding="0"><tr><td>錦江之星旅館有限公司系亞洲規模最大的綜合性旅遊企業集團</td></tr></table></body>
</html>注意：
1.一定要給table定義table-layout:fixed;只有定義了表格的佈局演算法為fixed，下面td的定義才能起作用。
其它的要點和上面一樣
text-overflow 的相容性：
測過ie6，ie7，ff3，safari，opera，chorme，只有ff3和opera不相容
/**************************************************************************************/
很多時候我們不僅需要實現一行溢位顯示省略號，也存在多行溢位需要顯示省略號的情況，解決辦法如下：
1.WebKit瀏覽器或移動端的頁面
在WebKit瀏覽器或移動端（絕大部分是WebKit核心的瀏覽器）的頁面實現比較簡單，可以直接使用WebKit的CSS擴充套件屬性(WebKit是私有屬性)-webkit-line-clamp ；注意：這是一個 不規範的屬性（unsupported WebKit property），它沒有出現在 CSS 規範草案中。
-webkit-line-clamp用來限制在一個塊元素顯示的文字的行數。 為了實現該效果，它需要組合其他的WebKit屬性。
常見結合屬性：
1.display: -webkit-box; 必須結合的屬性 ，將物件作為彈性伸縮盒子模型顯示 。
2.-webkit-box-orient 必須結合的屬性 ，設定或檢索伸縮盒物件的子元素的排列方式 。
3.text-overflow: ellipsis;，可以用來多行文字的情況下，用省略號“…”隱藏超出範圍的文字 。
overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;這個屬性比較合適WebKit瀏覽器或移動端（絕大部分是WebKit核心的）瀏覽器。
2.跨瀏覽器相容的方案
比較靠譜簡單的做法就是設定相對定位的容器高度，用包含省略號(…)的元素模擬實現；
p {
position:relative;
line-height:1.4em;
/* 3 times the line-height to show 3 lines */
height:4.2em;
overflow:hidden;
}
p::after {
content:"...";
font-weight:bold;
position:absolute;
bottom:0;
right:0;
padding:0 20px 1px 45px;
background:url(http://www.uedsc.com/wp-content/uploads/2015/11/ellipsis_bg.png) repeat-y;
}
<p>WebKit Browsers will clamp the number of lines in this paragraph to 2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>這裡注意幾點：
1.height高度最好是line-height的3倍；
2.結束的省略好用了半透明的png做了減淡的效果，或者設定背景顏色；
3.IE6-7不顯示content內容，所以要相容IE6-7可以是在內容中加入一個標籤，比如用…去模擬；
4.要支援IE8，需要將::after替換成:after；
3.JavaScript 方案
用js也可以根據上面的思路去模擬，實現也很簡單，推薦幾個做類似工作的成熟小工具：
1.Clamp.js
下載及文件地址：https://github.com/josephschmitt/Clamp.js
使用也非常簡單：
var module = document.getElementById("clamp-this-module");
$clamp(module, {clamp: 3});2.jQuery外掛-jQuery.dotdotdot
這個使用起來也很方便：
$(document).ready(function() {
$("#wrapper").dotdotdot({
// configuration goes here
});
});下載及詳細文件地址：https://github.com/BeSite/jQuery.dotdotdot或http://dotdotdot.frebsite.nl/