1.單行文本添加省略號
一般用于新聞列表展示
li{width: 200px;height: 30px;line-height: 30px;cursor: pointer;list-style-position: inside;/*將列表圖標位置設置為inside，默認outside，overflow值為hidden時會截取掉*/overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}小tip：為添加省略號的文本標簽添加title屬性，值為完整文本，當用戶鼠標停留在該文本時，會顯示完整內容。
核心代碼：
overflow: hidden;text-overflow: ellipsis;white-space: nowrap;
overflow 溢出
值：
visible：元素的內容在元素框之外也可見（溢出內容不被剪裁）
hidden：元素的內容會在元素框的邊界處剪裁，并且超出剪裁區域的內容不可見
scroll：元素的內容會在元素框的邊界處剪裁，但瀏覽器會顯示滾動條以便查看其余的內容
auto： 如果內容被剪裁，則瀏覽器會顯示滾動條以便查看其余的內容
inherit
初始值：visible
應用于：塊級元素、替換元素、表單元素
text-overflow 文本溢出
值：
clip：不顯示省略標記(...)，只是簡單的裁切，相當于無效果
ellipsis：文本溢出時顯示省略標記(...)，省略標記插入的位置是最后一個字符
初始值：cilp
應用于：塊級元素、替換元素、表單元素
white-space 空白符
（空白符是指空格、制表符he回車；HTML默認將所有空白符合并為一個空格）
值：
normal：合并空白符，允許自動換行
nowrap：合并空白符，不允許自動換行
pre-line：合并空白符（不包括換行符），允許自動換行
pre：不合并空白符，不允許自動換行
pre-wrap：不合并空白符，允許自動換行
2.多行文本末顯示省略號
① Webkit瀏覽器或移動端頁面
p{width: 200px;height:150px;border: 1px solid pink; line-height: 30px;cursor: pointer;padding: 0 5px;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 5;-webkit-box-orient: vertical;<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <p title="Web 瀏覽器對于 ECMAScript 來說是一個宿主環境，但它并不是唯一的宿主環境。事實上，還有不計其數的其他各種環境（例如 Nombas 的 ScriptEase，以及 Macromedia 同時用在 Flash 和 Director MX 中的 ActionScript）可以容納 ECMAScript 實現">Web 瀏覽器對于 ECMAScript 來說是一個宿主環境，但它并不是唯一的宿主環境。事實上，還有不計其數的其他各種環境（例如 Nombas 的 ScriptEase，以及 Macromedia 同時用在 Flash 和 Director MX 中的 ActionScript）可以容納 ECMAScript 實現</p> </body></html>
核心代碼：
{overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 5;-webkit-box-orient: vertical;}display：-webkit-box；將對象作為彈性盒子模型顯示。
-webkit-box-orient；設置或檢索伸縮盒對象的子元素的排列方式。
-webkit-line-clamp；限制在一個塊元素顯示的文本的行數。
小tip：該屬性為webkit的私有屬性，只適用于webkit內核瀏覽器或移動端。
② 跨瀏覽器兼容方案
②-1：設置相對定位的容器高度，用包含省略號（...）的元素模擬實現
p{width: 200px;height:150px;border: 1px solid pink;line-height: 30px;cursor: pointer;padding: 0 5px;overflow: hidden;position: relative;}span{position: absolute;bottom: 0;right: 0;}<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <p title="Web 瀏覽器對于 ECMAScript 來說是一個宿主環境，但它并不是唯一的宿主環境。事實上，還有不計其數的其他各種環境（例如 Nombas 的 ScriptEase，以及 Macromedia 同時用在 Flash 和 Director MX 中的 ActionScript）可以容納 ECMAScript 實現">Web 瀏覽器對于 ECMAScript 來說是一個宿主環境，但它并不是唯一的宿主環境。事實上，還有不計其數的其他各種環境（例如 Nombas 的 ScriptEase，以及 Macromedia 同時用在 Flash 和 Director MX 中的 ActionScript）可以容納 ECMAScript 實現<span>...</span></p> </body></html>
②-2：通過偽元素模擬添加省略號（...）
p{width: 200px;height:150px;border: 1px solid pink; line-height: 30px;cursor: pointer;padding: 0 5px;overflow: hidden;position: relative;}p:after{content: '...';position: absolute;background:url(http://css88.b0.upaiyun.com/css88/2014/09/ellipsis_bg.png) repeat-y;bottom: 0;right: 0;}小tip：
a.height高度應是line-height的n（行數）倍；
b.結束的省略號可用半透明png做減淡效果，或者設置背景顏色；
c.IE6-7不顯示content內容，解決方案如下：
引入jquery和jquery.pseudo.js
p{width: 200px;height:150px;border: 1px solid pink; line-height: 30px;cursor: pointer;padding: 0 5px;overflow: hidden;position: relative;}span{after:'...';position: absolute;right: 0;bottom: 0;}3.JavaScript方案
a.Clamp.js
下載及文檔地址：https://github.com/josephschmitt/Clamp.js
使用：
var module = document.getElementById("clamp-this-module");$clamp(module, {clamp: 3});b.jQuery.dotdotdot
下載及詳細文檔地址：https://github.com/BeSite/jQuery.dotdotdot或http://dotdotdot.frebsite.nl/
使用：
$(document).ready(function() { $("#wrapper").dotdotdot({ // configuration goes here });}); 以上就是本文的全部內容，希望本文的內容對大家的學習或者工作能帶來一定的幫助，同時也希望多多支持武林網！
新聞熱點
疑難解答
