解決多行文本溢出加省略號(hào)的兼容性

blair 發(fā)布于2019-08-20 14:30 / 3196人閱讀

摘要：自己開發(fā)的一款插件，為了解決多行結(jié)尾處添加省略號(hào)的兼容性問題。如何使用這個(gè)插件例子為需要添加省略號(hào)的元素添加一個(gè)類名然后使用該插件。參數(shù)這個(gè)參數(shù)決定需要顯示的行數(shù)。

自己開發(fā)的一款jQuery插件，為了解決多行結(jié)尾處添加省略號(hào)的兼容性問題。

GitHub: https://github.com/jesseNam/iClamp.js

如何使用這個(gè)插件？

例子

為需要添加省略號(hào)的元素添加一個(gè)類名 clamp-ellipsis：


  Lorem Ipsum is simply dummy text.

然后使用該插件。

$(document).ready(function() {
  var $container = $(".container");
  $container.clamp({clamp: 4});
});

參數(shù)

clamp (Number). 這個(gè)參數(shù)決定需要顯示的行數(shù)。

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/81685.html

相關(guān)文章

CSS實(shí)現(xiàn)單行、多行文本溢出顯示省略號(hào)

摘要：如果實(shí)現(xiàn)單行文本的溢出顯示省略號(hào)同學(xué)們應(yīng)該都知道用屬性來，當(dāng)然還需要加寬度屬來兼容部分瀏覽。接下來重點(diǎn)說一說多行文本溢出顯示省略號(hào)，如下。如果實(shí)現(xiàn)單行文本的溢出顯示省略號(hào)同學(xué)們應(yīng)該都知道用text-overflow:ellipsis屬性來，當(dāng)然還需要加寬度width屬來兼容部分瀏覽。實(shí)現(xiàn)方法： overflow: hidden; text-overflow:ellipsis; whit...

番茄西紅柿 2019-04-23 14:39 評(píng)論0 收藏0
移動(dòng)端的text-overflow多行文本溢出顯示省略號(hào)(…)

摘要：大家應(yīng)該都知道用屬性來實(shí)現(xiàn)單行文本的溢出顯示省略號(hào)。但是這個(gè)屬性并不支持多行文本溢出顯示省略號(hào)，這里根據(jù)應(yīng)用場(chǎng)景介紹幾個(gè)方法來實(shí)現(xiàn)這樣的效果。，可以用來多行文本的情況下，用省略號(hào)隱藏超出范圍的文本。大家應(yīng)該都知道用text-overflow:ellipsis屬性來實(shí)現(xiàn)單行文本的溢出顯示省略號(hào)(…)。當(dāng)然部分瀏覽器還需要加寬度width屬性。 overflow: hidden; te...

thekingisalwaysluc 2019-08-30 10:49 評(píng)論0 收藏0
移動(dòng)端的text-overflow多行文本溢出顯示省略號(hào)(…)

摘要：大家應(yīng)該都知道用屬性來實(shí)現(xiàn)單行文本的溢出顯示省略號(hào)。但是這個(gè)屬性并不支持多行文本溢出顯示省略號(hào)，這里根據(jù)應(yīng)用場(chǎng)景介紹幾個(gè)方法來實(shí)現(xiàn)這樣的效果。，可以用來多行文本的情況下，用省略號(hào)隱藏超出范圍的文本。大家應(yīng)該都知道用text-overflow:ellipsis屬性來實(shí)現(xiàn)單行文本的溢出顯示省略號(hào)(…)。當(dāng)然部分瀏覽器還需要加寬度width屬性。 overflow: hidden; te...

JerryWangSAP 2019-08-26 18:27 評(píng)論0 收藏0
CSS - 純css實(shí)現(xiàn)多行文本溢出省略（兼容所有瀏覽器）

摘要：前言多行文本超出高度限制出現(xiàn)省略號(hào)移動(dòng)端多為內(nèi)核的有擴(kuò)展屬性但并不是規(guī)范中的屬性端往往要借助去實(shí)現(xiàn)這一效果，但麻煩且不是很靠譜，今天就用純來實(shí)現(xiàn)一個(gè)完全兼容的多行省略。前言多行文本超出高度限制出現(xiàn)省略號(hào) , 移動(dòng)端多為webkit內(nèi)核的 , 有擴(kuò)展屬性-webkit-line-clamp , 但并不是CSS規(guī)范中的屬性 , PC端往往要借助js去實(shí)現(xiàn)這一效果，但麻煩且不是很靠譜，今...

李義 2019-08-29 12:21 評(píng)論0 收藏0