js超出文本省略号
转自：http://www.jb51.net/article/88566.htmjavascript超过容器后显示省略号效果在实际的项目中，由于文字内容的长度不确定性和页面布局的固定性，难免会出现文字内容超过div（或其他标签，下同）区域的情况，此时比较好的做法就是当文字超过限定的div宽度后自动以省略号（…）显示，这样，按照习惯，人们都会知道这儿有文字被省略了。css中有个属性叫做text-ov
转自：http://www.jb51.net/article/88566.htm
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所有的代码如下：
复制代码
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
|
/*
* 基于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
};
|
权威｜前沿｜技术｜干货｜国内首个API全生命周期开发者社区
更多推荐
0
0- 0
已为社区贡献1条内容
所有评论(0)