javascript超過(guò)容器后顯示省略號(hào)效果的方法(兼容一行或者多行)
javascript超過(guò)容器后顯示省略號(hào)效果
在實(shí)際的項(xiàng)目中,由于文字內(nèi)容的長(zhǎng)度不確定性和頁(yè)面布局的固定性,難免會(huì)出現(xiàn)文字內(nèi)容超過(guò)div(或其他標(biāo)簽,下同)區(qū)域的情況,此時(shí)比較好的做法就是當(dāng)文字超過(guò)限定的div寬度后自動(dòng)以省略號(hào)(…)顯示,這樣,按照習(xí)慣,人們都會(huì)知道這兒有文字被省略了。css中有個(gè)屬性叫做text-overflow:ellipsis;比如使用css可以這樣寫:
{width:27em; white-space:nowrap; text-overflow:ellipsis; -o-text-overflow:ellipsis; overflow:hidden;}僅在Firefox火狐瀏覽器下無(wú)法實(shí)現(xiàn)文字溢出省略號(hào)表示,其文字直接從中間咔掉了,我這邊不講用css怎么樣來(lái)實(shí)現(xiàn)這樣的,具體的css實(shí)現(xiàn)可以自己百度去,我這邊最主要的是講怎么樣用JS來(lái)實(shí)現(xiàn),怎么樣通過(guò)JS寫一個(gè)簡(jiǎn)單的組件,我直接調(diào)用JS的初始化方法就可以實(shí)現(xiàn)掉!比如如下效果:
后面的點(diǎn)點(diǎn)點(diǎn) 來(lái)提示用戶有更多的內(nèi)容未顯示完成這樣的效果!
先廢話少說(shuō)!首先來(lái)看看我做的demo效果,就能明白到底是個(gè)什么樣的效果!
想看效果,請(qǐng)點(diǎn)擊我!ok?
一: 先來(lái)看看組件的配置項(xiàng):如下:
targetCls
null, 目標(biāo)要截取的容器 必填項(xiàng) 默認(rèn)為null
limitLineNumber 1, 要顯示的行數(shù) 默認(rèn)為1行
type '...', 超過(guò)了容器長(zhǎng)度 顯示的type 默認(rèn)為省略號(hào)
lineHeight 18, dom節(jié)點(diǎn)的行高 默認(rèn)行高為18
isShowTitle true , title 是否需要title來(lái)顯示所有的內(nèi)容 默認(rèn)為true
isCharLimit false 根據(jù)字符的長(zhǎng)度來(lái)限制 超過(guò)顯示省略號(hào)
maxLength 20 默認(rèn)長(zhǎng)度為20 超過(guò)字符20后 顯示省略號(hào)
二:分析
1. 首先來(lái)講講此組件:支持2種方式來(lái)截取字符串,第一:根據(jù)字符的長(zhǎng)度來(lái)截取,超過(guò)后顯示省略號(hào),比如我這樣調(diào)用:
new MultiEllipsis({
"targetCls" : '.text8',
"isCharLimit":true,
"maxLength": 18
});
這樣初始化的意思是說(shuō),isCharLimit為true是指用字符的個(gè)數(shù)來(lái)截取,最大的長(zhǎng)度maxLength為18,這樣初始化,因?yàn)榇a里面會(huì)首先判斷如果isCharLimit為true的話,就直接按照字符的個(gè)數(shù)來(lái)截取,比如如下代碼:
2. 第二種是根據(jù)多少行數(shù)及高度來(lái)截取的,比如默認(rèn)配置項(xiàng)的行高是18,如果我想顯示2行,那也就是說(shuō)高度h = 18*2, 假如容器的高度是100,那么截取的方法是:
使用 (100 - type的長(zhǎng)度 - 1) 是否大于 18×2,如果大于的話,繼續(xù)截取,否則的不截取,且顯示省略號(hào)效果!如下代碼:
缺點(diǎn):但是使用行高截取的話,如果數(shù)據(jù)比較少的話,是可以的,但是如果數(shù)據(jù)很多的話,比如高度為500像素或者更多的話,那么相對(duì)來(lái)說(shuō)會(huì)影響性能的,因?yàn)樗麄兠看味家?jì)算n次(n為循環(huán)調(diào)用函數(shù)多的意思)。
JS所有的代碼如下:
復(fù)制代碼
/* * 基于JS的MultiEllipsis * @author tugenhua */ function MultiEllipsis(options) { var self = this; self.options = $.extend({},defaults,options || {}); self._init(); } $.extend(MultiEllipsis.prototype,{ // 頁(yè)面初始化 _init: function(){ var self = this, cfg = self.options; if(cfg.targetCls == null || $(cfg.targetCls + "")[0] === undefined) { if(window.console) { console.log("targetCls不為空!"); } return; } if(cfg.isShowTitle) { // 獲取元素的文本 添加title屬性 var title = self.getText(); $(cfg.targetCls ).attr({"title":title}); } // 如果是按照字符來(lái)限制的話 那么就不按照高度來(lái)比較 直接返回 if(cfg.isCharLimit) { self._charCompare(); return; } self._compareHeight(cfg.lineHeight * cfg.limitLineNumber); }, /* * 按照字符的長(zhǎng)度來(lái)比較 來(lái)顯示文本 * @method _charCompare {private} * @return 返回新的字符串到容器里面 */ _charCompare: function(){ var self = this, cfg = self.options; var text = self.getText(); if(text.length > cfg.maxLength) { var curText = text.substring(0,cfg.maxLength); $($(cfg.targetCls + "")[0]).html(curText + cfg.type); } }, /* * 獲取目標(biāo)元素的text * 如果有屬性 data-text 有值的話 那么先獲取這個(gè)值 否則的話 直接去html內(nèi)容 * @method getText {public} */ getText: function(){ var self = this, cfg = self.options; return $.trim($($(cfg.targetCls + "")[0]).html()); }, /* * 設(shè)置dom元素文本 * @method setText {public} */ setText: function(text){ var self = this, cfg = self.options; $($(cfg.targetCls + "")[0]).html(text); }, /* * 通過(guò)配置項(xiàng)的 行數(shù) * 一行的行高 是否大于或者等于當(dāng)前的高度 * @method _compareHeight {private} */ _compareHeight: function(maxLineHeight) { var self = this; var curHeight = self._getTargetHeight(); if(curHeight > maxLineHeight) { self._deleteText(self.getText()); } }, /* * 截取文本 * @method _deleteText {private} * @return 返回被截取的文本 */ _deleteText: function(text){ var self = this, cfg = self.options, typeLen = cfg.type.length; var curText = text.substring(0,text.length - typeLen - 1); curText += cfg.type; // 設(shè)置元素的文本 self.setText(curText); // 繼續(xù)調(diào)用函數(shù)進(jìn)行比較 self._compareHeight(cfg.lineHeight * cfg.limitLineNumber); }, /* * 返回當(dāng)前dom的高度 */ _getTargetHeight: function(){ var self = this, cfg = self.options; return $($(cfg.targetCls + "")[0]).height(); } }); var defaults = { 'targetCls' : null, // 目標(biāo)要截取的容器 'limitLineNumber' : 1, // 限制的行數(shù) 通過(guò) 行數(shù) * 一行的行高 >= 容器的高度 'type' : '...', // 超過(guò)了長(zhǎng)度 顯示的type 默認(rèn)為省略號(hào) 'lineHeight' : 18, // dom節(jié)點(diǎn)的行高 'isShowTitle' : true, // title是否顯示所有的內(nèi)容 默認(rèn)為true 'isCharLimit' : false, // 根據(jù)字符的長(zhǎng)度來(lái)限制 超過(guò)顯示省略號(hào) 'maxLength' : 20 // 默認(rèn)為20 };
以上這篇javascript超過(guò)容器后顯示省略號(hào)效果的方法(兼容一行或者多行)就是小編分享給大家的全部?jī)?nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
將中國(guó)標(biāo)準(zhǔn)時(shí)間轉(zhuǎn)換成標(biāo)準(zhǔn)格式的代碼
這篇文章主要介紹了將中國(guó)標(biāo)準(zhǔn)時(shí)間轉(zhuǎn)換成標(biāo)準(zhǔn)格式的方法,需要的朋友可以參考下2014-03-03

JavaScript實(shí)現(xiàn)窗口抖動(dòng)效果

javascript適配器模式和組合模式原理與實(shí)現(xiàn)方法詳解

js給onclick事件賦值,動(dòng)態(tài)傳參數(shù)實(shí)例解說(shuō)

JavaScript實(shí)現(xiàn)對(duì)下拉列表值進(jìn)行排序的方法

Bootstrap實(shí)現(xiàn)默認(rèn)導(dǎo)航欄效果

javascript閉包的高級(jí)使用方法實(shí)例

JavaScript實(shí)現(xiàn)在頁(yè)面間傳值的方法