<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>省略号的使用</title>
<!-- 通过css样式跳出省略号 -->
<style>
/* 单行出现省略号 */
.boxEllipsis{
width: 100px;
height: 30px;
border: 1px solid red;
line-height: 30px;
overflow: hidden;
/*设置内容不换行 */
white-space: nowrap;
/* 设置超出内容为省略号 */
text-overflow: ellipsis;
}
/* 多行出现省略号 */
/*
适用范围： 因使用了webkit的css扩展属性，改方法适用于 webkit 浏览器及移动端
-webkit-line-clamp:2 用来限制在一个块儿元素显示的文本行数，为实现该效果必须结合其他的webkit属性 以下：
display:-webkit-box; 必须结合的属性，将对象作为弹性伸缩盒子模型显示。
-webkit-box-orient:vertical 必须结合的属性，设置或检索伸缩盒子对象的子元素的排列方式
orient : 确定方向 ， 东方
vertical : 垂直的
*/
.moreEllipsis{
width: 100px;
height: 40px;
border: 1px solid red;
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp:2;
}
/* 通过js判定指定的字符（判断有几个字符串 显示省略号） */
.jqEllipsis{
width: 100px;
height: 30px;
border: 1px solid red;
line-height: 30px;
}
</style>
</head>
<body>
<div class="boxEllipsis">
这里面是一段单行省略号使用的文字
</div>
<div class="moreEllipsis">
这里面是一段多行文字出现省略号使用的文字
</div>
<div class="jqEllipsis">
</div>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script>
var str = '这里有一段文字需要显示'
var s = str
if(str.length >= 5){
// substring() 方法用于提取字符串中介于两个指定下标之间的字符。
// stringObject.substring(start,stop)
s = str.substring(0,5) + "..."
}
$(".jqEllipsis").html(s)
</script>
</body>
</html>
