# content-ellipsis
介绍了两种实现文本省略号的方法，相关详细解释请看鑫大文章 (opens new window)
# 常规CSS方法
如果只是一行文本，超出元素以省略号表示，以下是常规方法：
p {
width: 250px;
border: 1px solid lightblue;
overflow: hidden;
text-overflow: ellipsis; //将文本超出以省略号显示
white-space: nowrap; //文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止
}
1
2
3
4
5
6
7
2
3
4
5
6
7
实现多行文本超出部分以省略号表示，可以用以下方法
<style>p {
width: 250px;
border: 1px solid lightblue;
overflow: hidden;
text-overflow: ellipsis;
/*text-overflow : clip; //将文本超出部分剪切*/
display: -webkit-box;
-webkit-line-clamp: 3;
/* 设置行数为3行 如果设置的剪切 则设置几行只显示几行*/
-webkit-box-orient: vertical;
/*子元素垂直排列*/
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
# jQuery限制字符字数的方法
//限制字符个数
$("#text_overflow").each(function() {
var maxwidth = 18;
if ($(this).text().length > maxwidth) {
$(this).text($(this).text().substring(0, maxwidth));
$(this).html($(this).text() + '...');
}
});
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
