下面小编就为大家带来一篇 javascript 超过容器后显示省略号效果的方法 (兼容一行或者多行)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
javascript 超过容器后显示省略号效果
在实际的项目中,由于文字内容的长度不确定性和页面布局的固定性,难免会出现文字内容超过 div(或其他标签,下同)区域的情况,此时比较好的做法就是当文字超过限定的 div 宽度后自动以省略号(…)显示,这样,按照习惯,人们都会知道这儿有文字被省略了。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, dom 节点的行高 默认行高为 18
isShowTitle true , title 是否需要 title 来显示所有的内容 默认为 true
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
- };
以上这篇 javascript 超过容器后显示省略号效果的方法 (兼容一行或者多行) 就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持 phperz。
来源: http://www.phperz.com/article/17/0310/264291.html