js實作超出文字變成省略號
- 小云云原創
- 2018-03-02 15:32:062566瀏覽
在實際的項目中，由於文字內容的長度不確定性和頁面佈局的固定性，難免會出現文字內容超過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
});這樣初始化的意思是說，isCharLimit為true是指用字元的個數來截取，最大的長度maxLength為18，這樣初始化，因為程式碼裡面會先判斷如果isCharLimit為true的話，就直接按照字元的個數來截取，例如以下程式碼：2. 第二種是根據多少行數及高度來截取的，例如預設配置項的行高是18，如果我想顯示2行，那也就是說高度h = 18*2,假如容器的高度是100，那麼截取的方法是：使用(100 - type的長度- 1) 是否大於18×2，如果大於的話，繼續截取，否則的不截取，且顯示省略號效果！如下程式碼：缺點：但是使用行高截取的話，如果資料比較少的話，是可以的，但是如果資料很多的話，例如高度為500像素或更多的話，那麼相對來說會影響性能的，因為他們每次都要計算n次(n為循環調用函數多的意思)。 JS所有的程式碼如下：/*
* 基于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中文網其他相關文章！