本文介绍一种基于JavaScript的组件实现方案，用于处理容器内文字溢出显示省略号的问题。该方案支持单行及多行文本截断，提供按字符长度或行数高度两种截取方式，并兼容主流浏览器，解决CSS text-overflow在多行场景下的局限。
JavaScript实现容器文字溢出省略号效果
JavaScript实现容器文字溢出省略号效果
CSS局限性与JS组件方案
在实际项目开发中，由于文本内容长度具有不确定性而页面布局往往固定，文字内容超出div（或其他标签）区域的情况时有发生。此时，最佳实践是当文字超过限定div宽度时，自动以省略号（…）显示。按照用户习惯，这种标识能明确提示此处有被省略的文字。CSS中提供了text-overflow:ellipsis属性，例如通过CSS实现可写作：
{width:27em; white-space:nowrap; text-overflow:ellipsis; -o-text-overflow:ellipsis; overflow:hidden;}然而，该CSS方案在Firefox浏览器下无法正确显示文字溢出省略号，文字会直接从中间截断。本文不讨论CSS的具体实现，重点在于如何通过JavaScript编写一个简易组件，只需调用JS初始化方法即可实现该效果。
最终效果如后文所示，通过末尾的省略号提示用户还有更多内容未完全显示。
首先展示Demo效果，以便直观了解实现结果。
如需查看具体效果，请点击链接。
组件配置项说明
一、组件配置项说明如下：
targetCls
null，目标截取容器，必填项，默认为null
limitLineNumber 1，要显示的行数，默认为1行
type '...'，超出容器长度时显示的字符，默认为省略号
lineHeight 18，DOM节点的行高，默认行高为18
isShowTitle true，是否需要title属性显示所有内容，默认为true
isCharLimit false，是否根据字符长度限制，超过则显示省略号
maxLength 20，默认长度为20，超过字符数20后显示省略号
逻辑分析与实现方式
二、逻辑分析
1. 首先介绍该组件支持两种字符串截取方式：第一种是根据字符长度截取，超过后显示省略号。例如调用方式如下：
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为循环调用函数的次数）而影响性能。
完整代码与总结
JavaScript完整代码如下：
复制代码
/*
* 基于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
};
以上这篇JavaScript实现容器文字溢出省略号效果的方法（兼容单行或多行）即为分享的全部内容，希望能提供参考，并希望大家多多支持本站。