單/多行文本添加省略號 (oﾟωﾟo)

時間 2019-11-12

標籤行文添加省略號简体版

原文原文鏈接

1.單行文本添加省略號css

通常用於新聞列表展現html

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;
}

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <ul>
            <li title="JavaScript 的核心 ECMAScript 描述了該語言的語法和基本對象。">JavaScript 的核心 ECMAScript 描述了該語言的語法和基本對象。</li>
            <li title="DOM 描述了處理網頁內容的方法和接口。">DOM 描述了處理網頁內容的方法和接口。</li>
            <li title="BOM 描述了與瀏覽器進行交互的方法和接口。">BOM 描述了與瀏覽器進行交互的方法和接口。</li>
        </ul>
    </body>
</html>

小tip：爲添加省略號的文本標籤添加title屬性，值爲完整文本，當用戶鼠標停留在該文本時，會顯示完整內容。jquery

核心代碼：git

overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

overflow 溢出github

值：web

visible：元素的內容在元素框以外也可見（溢出內容不被剪裁）瀏覽器

hidden：元素的內容會在元素框的邊界處剪裁，而且超出剪裁區域的內容不可見app

scroll：元素的內容會在元素框的邊界處剪裁，但瀏覽器會顯示滾動條以便查看其他的內容ide

auto：若是內容被剪裁，則瀏覽器會顯示滾動條以便查看其他的內容this

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
    });
});

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。