單/多行文本添加省略號方法詳解
我要評論1.單行文本添加省略號
一般用于新聞列表展示
li{
width: 200px;
height: 30px;
line-height: 30px;
cursor: pointer;
list-style-position: inside;/*將列表圖標(biāo)位置設(shè)置為inside，默認(rèn)outside，overflow值為hidden時會截取掉*/
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
小tip：為添加省略號的文本標(biāo)簽添加title屬性，值為完整文本，當(dāng)用戶鼠標(biāo)停留在該文本時，會顯示完整內(nèi)容。
核心代碼：
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
overflow 溢出
值：
visible：元素的內(nèi)容在元素框之外也可見（溢出內(nèi)容不被剪裁）
hidden：元素的內(nèi)容會在元素框的邊界處剪裁，并且超出剪裁區(qū)域的內(nèi)容不可見
scroll：元素的內(nèi)容會在元素框的邊界處剪裁，但瀏覽器會顯示滾動條以便查看其余的內(nèi)容
auto： 如果內(nèi)容被剪裁，則瀏覽器會顯示滾動條以便查看其余的內(nèi)容
inherit
初始值：visible
應(yīng)用于：塊級元素、替換元素、表單元素
text-overflow 文本溢出
值：
clip：不顯示省略標(biāo)記(...)，只是簡單的裁切，相當(dāng)于無效果
ellipsis：文本溢出時顯示省略標(biāo)記(...)，省略標(biāo)記插入的位置是最后一個字符
初始值：cilp
應(yīng)用于：塊級元素、替換元素、表單元素
white-space 空白符
（空白符是指空格、制表符he回車；HTML默認(rèn)將所有空白符合并為一個空格）
值：
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 來說是一個宿主環(huán)境，但它并不是唯一的宿主環(huán)境。事實(shí)上，還有不計其數(shù)的其他各種環(huán)境（例如 Nombas 的 ScriptEase，以及 Macromedia 同時用在 Flash 和 Director MX 中的 ActionScript）可以容納 ECMAScript 實(shí)現(xiàn)">Web 瀏覽器對于 ECMAScript 來說是一個宿主環(huán)境，但它并不是唯一的宿主環(huán)境。事實(shí)上，還有不計其數(shù)的其他各種環(huán)境（例如 Nombas 的 ScriptEase，以及 Macromedia 同時用在 Flash 和 Director MX 中的 ActionScript）可以容納 ECMAScript 實(shí)現(xiàn)</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；設(shè)置或檢索伸縮盒對象的子元素的排列方式。
-webkit-line-clamp；限制在一個塊元素顯示的文本的行數(shù)。
小tip：該屬性為webkit的私有屬性，只適用于webkit內(nèi)核瀏覽器或移動端。
② 跨瀏覽器兼容方案
②-1：設(shè)置相對定位的容器高度，用包含省略號（...）的元素模擬實(shí)現(xiàn)
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 來說是一個宿主環(huán)境，但它并不是唯一的宿主環(huán)境。事實(shí)上，還有不計其數(shù)的其他各種環(huán)境（例如 Nombas 的 ScriptEase，以及 Macromedia 同時用在 Flash 和 Director MX 中的 ActionScript）可以容納 ECMAScript 實(shí)現(xiàn)">Web 瀏覽器對于 ECMAScript 來說是一個宿主環(huán)境，但它并不是唯一的宿主環(huán)境。事實(shí)上，還有不計其數(shù)的其他各種環(huán)境（例如 Nombas 的 ScriptEase，以及 Macromedia 同時用在 Flash 和 Director MX 中的 ActionScript）可以容納 ECMAScript 實(shí)現(xiàn)<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高度應(yīng)是line-height的n（行數(shù)）倍；
b.結(jié)束的省略號可用半透明png做減淡效果，或者設(shè)置背景顏色；
c.IE6-7不顯示content內(nèi)容，解決方案如下：
引入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
下載及詳細(xì)文檔地址：https://github.com/BeSite/jQuery.dotdotdot或http://dotdotdot.frebsite.nl/
使用：
$(document).ready(function() {
$("#wrapper").dotdotdot({
// configuration goes here
});
});
以上就是本文的全部內(nèi)容，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助，同時也希望多多支持腳本之家！
相關(guān)文章
css3實(shí)現(xiàn)漸變、陰影、超出指定文本省略號顯示等一些效果實(shí)例
下面小編就為大家?guī)硪黄猚ss3實(shí)現(xiàn)漸變、陰影、超出指定文本省略號顯示等一些效果實(shí)例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-08-10強(qiáng)制文本在一行內(nèi)顯示,并且后面有省略號效果的實(shí)現(xiàn)方法
下面小編就為大家?guī)硪黄獜?qiáng)制文本在一行內(nèi)顯示,并且后面有省略號效果的實(shí)現(xiàn)方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-07-12CSS文本超出指定寬度后隱藏并顯示為省略號的實(shí)現(xiàn)方法
下面小編就為大家?guī)硪黄狢SS文本超出指定寬度后隱藏并顯示為省略號的實(shí)現(xiàn)方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-05-24CSS控制文本超出指定寬度顯示省略號和文本不換行效果的實(shí)現(xiàn)
下面小編就為大家?guī)硪黄狢SS控制文本超出指定寬度顯示省略號和文本不換行效果的實(shí)現(xiàn)。小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考2016-05-05- 這篇文章主要介紹了CSS超出文本指定寬度用省略號代替和文本不換行的相關(guān)資料，小編覺的實(shí)用性非常，特此分享到腳本之家平臺，供大家參考2016-05-05
CSS控制文本的長度 超過一行顯示省略號的實(shí)現(xiàn)方法
下面小編就為大家?guī)硪黄狢SS控制文本的長度 超過一行顯示省略號的實(shí)現(xiàn)方法。小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考2016-04-15- 在項目中我們經(jīng)常需要在文本過長時顯示，將文本超出的部分內(nèi)容用省略號代替，基于css代碼是怎么實(shí)現(xiàn)的呢？下面腳本之家小編通過分析本文給大家詳解，感興趣的朋友一起學(xué)習(xí)2016-01-19
CSS實(shí)現(xiàn)單行、多行文本溢出顯示省略號的實(shí)現(xiàn)方法
如果實(shí)現(xiàn)單行文本的溢出顯示省略號同學(xué)們應(yīng)該都知道用text-overflow:ellipsis屬性來，當(dāng)然還需要加寬度width屬來兼容部分瀏覽2018-03-01- 這篇文章主要介紹了css實(shí)現(xiàn)文本溢出顯示省略號的方法和示例分享，推薦給大家。2014-12-23
通過純CSS樣式實(shí)現(xiàn)DIV元素中多行文本超長自動省略號
可以通過css樣式實(shí)現(xiàn)DIV元素中文本超長后自動截斷并以省略號結(jié)尾，一般情況下都是使用javascript，其實(shí)使用純CSS樣式也可以做到2014-05-05