-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathellipsis.html
41 lines (37 loc) · 1.93 KB
/
ellipsis.html
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
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<meta name='viewport' content='width=device-width'/>
<!--<script type="text/javascript" src='http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js'></script>-->
<!--<script type="text/javascript" src=' http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js'></script>-->
<!-- <link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.2.0/css/bootstrap.min.css"> -->
<title>Document</title>
<style type="text/css">
p {
width: 300px;
border: 1px solid skyblue;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
line-height: 1.5;
max-height: 4.5em;/**设置行高和最大高度是为了兼容火狐浏览器显示3行文字，若不考虑火狐可以不设**/
}
</style>
</head>
<body>
<p class='ellipsis3'>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus autem debitis ducimus, earum eligendi facere labore magni odio recusandae, rerum tempora, vitae. Accusantium ducimus molestias mollitia, quis repellat veniam veritatis.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus autem debitis ducimus, earum eligendi facere labore magni odio recusandae, rerum tempora, vitae. Accusantium ducimus molestias mollitia, quis repellat veniam veritatis.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus autem debitis ducimus, earum eligendi facere labore magni odio recusandae, rerum tempora, vitae. Accusantium ducimus molestias mollitia, quis repellat veniam veritatis.
</p>
<script>
</script>
</body>
</html>