在實際的項目中,由於文字內容的長度不確定性和頁面佈局的固定性,難免會出現文字內容超過p(或其他標籤,下同)區域的情況,此時比較好的做法就是當文字超過限定的p寬度後自動以省略號(…)顯示,這樣,按照習慣,人們都會知道這兒有文字被省略了。 css中有個屬性叫做text-overflow:ellipsis;例如使用css可以這樣寫:
{width:27em; white-space:nowrap; text-overflow:ellipsis; -o-text- overflow:ellipsis; overflow:hidden;}僅在Firefox火狐瀏覽器下無法實現文字溢出省略號表示,其文字直接從中間咔掉了,我這邊不講用css怎麼樣來實現這樣的,具體的css實現可以自己百度去,我這邊最主要的是說怎麼樣用JS來實現,怎麼樣透過JS寫一個簡單的元件,我直接呼叫JS的初始化方法就可以實現掉!例如如下效果:
後面的點點點 來提示使用者有更多的內容未顯示完成這樣的效果!
先廢話少說!首先來看看我做的demo效果,就能明白到底是個什麼樣的效果!
想看效果,請點我! ok?
一: 先來看看元件的設定項目:如下:
targetCls
null, 目標要截取的容器必填項目預設為null
limitLineNumber 1, 要顯示的行數預設為1行
type '...', 超過了容器長度顯示的type 預設為省略號
lineHeight 預設行高為18
isShowTitle true , title 是否需要title來顯示所有的內容預設為true
isCharLimit false 依字元的長度限制超過顯示省略號##isCharLimit false 依據字元的長度來限制超過顯示省略號
##maxLength# 20 預設長度為20 超過字元20後顯示省略號二:分析1. 先來講講此元件:支援2種方式來擷取字串,第一:根據字元的長度來截取,超過後顯示省略號,像我這樣呼叫:new MultiEllipsis ({ "targetCls" : '.text8', "isCharLimit": true, "maxLength": 18 });
/* * 基于JS的MultiEllipsis * @author tugenhua */ function MultiEllipsis(options) { var self = this; self.options = $.extend({},defaults,options || {}); self._init(); } $.extend(MultiEllipsis.prototype,{ // 页面初始化 _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}); } // 如果是按照字符来限制的话 那么就不按照高度来比较 直接返回 if(cfg.isCharLimit) { self._charCompare(); return; } self._compareHeight(cfg.lineHeight * cfg.limitLineNumber); }, /* * 按照字符的长度来比较 来显示文本 * @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); } }, /* * 获取目标元素的text * 如果有属性 data-text 有值的话 那么先获取这个值 否则的话 直接去html内容 * @method getText {public} */ getText: function(){ var self = this, cfg = self.options; return $.trim($($(cfg.targetCls + "")[0]).html()); }, /* * 设置dom元素文本 * @method setText {public} */ setText: function(text){ var self = this, cfg = self.options; $($(cfg.targetCls + "")[0]).html(text); }, /* * 通过配置项的 行数 * 一行的行高 是否大于或者等于当前的高度 * @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; // 设置元素的文本 self.setText(curText); // 继续调用函数进行比较 self._compareHeight(cfg.lineHeight * cfg.limitLineNumber); }, /* * 返回当前dom的高度 */ _getTargetHeight: function(){ var self = this, cfg = self.options; return $($(cfg.targetCls + "")[0]).height(); } }); var defaults = { 'targetCls' : null, // 目标要截取的容器 'limitLineNumber' : 1, // 限制的行数 通过 行数 * 一行的行高 >= 容器的高度 'type' : '...', // 超过了长度 显示的type 默认为省略号 'lineHeight' : 18, // dom节点的行高 'isShowTitle' : true, // title是否显示所有的内容 默认为true 'isCharLimit' : false, // 根据字符的长度来限制 超过显示省略号 'maxLength' : 20 // 默认为20 };
以上是js實作超出文字變成省略號的詳細內容。更多資訊請關注PHP中文網其他相關文章!