单行，多行文本溢出

发表于

先说一下单行和多行文本溢出的解决方法，然后再说一下我项目中用到的方法。
首先单行文本溢出：
应用纯css的用法：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<div id="ellipsis">单行单行单行单行单行单行单行单行单行单行单行</div>
//css 第一种
#ellipsis{
	width:200px;
	overflow:hidden;
	white-space:nowrap;
	text-overflow:ellipsis;
}
//css 第二种 用伪类进行模拟（此处提供一种思路，实际遇到问题，需要再调试）
#ellipsis{
	width:200px;
	height:20px;
	position:relative;
	overflow: hidden;
}
#ellipsis:after{
	content: "...";
	position:absolute;
	right:0;
	bottom:0;
	padding-left:30px;
}

接着说一下多行文本溢出

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<div id="ellipsis">
	CSS实现多行文本溢出显示省略号CSS实现多行文本溢出显示省略号CSS实现多行文本溢出显示省略号
	CSS实现多行文本溢出显示省略号CSS实现多行文本溢出显示省略号CSS实现多行文本溢出显示省略号
	CSS实现多行文本溢出显示省略号
</div>
//css 第一种 注意：因使用了WebKit的CSS扩展属性，该方法适用于WebKit浏览器及移动端
#ellipsis{
width:200px;
display: -webkit-box;//将对象作为弹性伸缩盒子模型显示 
-webkit-box-orient: vertical;//设置或检索伸缩盒对象的子元素的排列方式 。
-webkit-line-clamp: 3;//用来限制在一个块元素显示的文本的行数
overflow: hidden;//多余的隐藏
}
//css 第二种 用伪类进行模拟（此处提供一种思路，实际遇到问题，需要再调试）
#ellipsis{position: relative; line-height: 20px; max-height: 40px;overflow: hidden;}
#ellipsis:after{content: "..."; position: absolute; bottom: 0; right: 0; padding-left: 30px;
background: -webkit-linear-gradient(left, transparent, #fff 55%);
background: -o-linear-gradient(right, transparent, #fff 55%);
background: -moz-linear-gradient(right, transparent, #fff 55%);
background: linear-gradient(to right, transparent, #fff 55%);
} 
//注意：ie6-7不显示content内容
1.将height设置为line-height的整数倍，防止超出的文字露出。
2.给p::after添加渐变背景可避免文字只显示一半。

项目中要对一个div中的文字进行控制，文本溢出在溢出的部分要显示“…”，焦点在当前div时则要进行跑马灯的动作。
我们这里用的是字符串截取的方式，比如说：

1
<div id="txt">截取字符串</div>

在这个div中最多就能显示三个汉字，多余的则用“…”显示，注意是汉字，所以此时问题就出现了，用截取字符串的方法，截取前三个汉字“截取字”，然后再加上“…”，那么div中的内容就是“截取字…”，如果文本是英文呢，在浏览器中显示的时候，你就会觉得，这么短就要加“…”了？
所以我的方法是把英文字母或是数字以0.5个字符来计算。这样div“汉abcd123文字”中只显示三个字符的话就是“汉abcd…”,

下面上代码：

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
//得到文字字符长度，规则：中文字符算一个，英文，数字算0.5个（不足1个的当一个计算）
function getStrLen(str)
{
	var reg = /[0-9A-Za-z]/mg;
	var englishMatch = str.match(reg);
	var e_len = 0,//英语长度
		o_len = 0,//汉语长度
		len = str.length;
	if(englishMatch)
	{
		e_len = englishMatch.length;
		o_len = len - e_len;
		if(e_len%2 == 1)
		{
			len = o_len + Math.floor(e_len/2) + 1;
		}
		else
		{
			len = o_len + e_len/2;
		}
		console.log("o_len" + o_len);
		console.log("e_len" + e_len);
	}
	return len;
}
//通过源字符串和实际允许显示的字符长度（英文和数字按0.5来算），返回该字符串可截取的索引值	
function cutOutStr(str,len)
{
	var reg = /[0-9A-Za-z]/mg;
	var i_len = 0,
		t_len = 0,
		index = 0;
	for(var i=0;i<str.length;i++)
	{
		if(str[i].match(reg))
		{
			i_len = 0.5;
		}
		else
		{
			i_len = 1;
		}
		t_len += i_len;
		if(t_len>=len)
		{
			index = i;
			break;
		}
	}
	return index;
}

下面是验证的代码：

1
2
3
4
5
6
7
8
9
<div id="txt">验证eng的文字</div>
var txt = document.getElementById("txt").innerHTML;
console.log(txt);
var len = getStrLen(txt);
var index = cutOutStr(txt,6);
console.log(index);
var t = txt.substring(0,index) + "...";
console.log(t);
document.getElementById("txt").innerHTML = t;

这就是我项目中用到的方法，有人看到这会说这就是一个单行文本溢出的问题么，用上边的方法就可以了，其实不然，我们项目里面还有其他的场景要求，这里不会细写，只是提供一种思路。