一，文本居中
通过line-height 和height 设置相同高度来实现
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<html>
<head>
<meta charset='utf-8'>
<title>Page Title</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<style>
.parent{
width: 600px;
height: 300px;
line-height: 300px;
background-color: wheat;
text-align: center;
}
</style>
</head>
<body>
<div class="parent">
hello world
</div>
</body>
</html>通过
vertical-align来实现,但只针对拥有valign特性的元素才生效，结合display: table;，但对低版本浏览器支持不好1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>Page Title</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<style>
.parent{
display:table-cell;
vertical-align:middle;
text-align: center; /*设置文本水平居中*/
width:100%;
height: 300px;
background-color: wheat;
}
</style>
</head>
<body>
<div class="parent">
hello world
</div>
</body>
</html>绝对定位来实现 position:absolute,手动调整top值
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
<html>
<head>
<meta charset='utf-8'>
<title>Page Title</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<style>
.parent{
width:100%;
height: 300px;
background-color: wheat;
position: relative;
display: table;
}
.content{
position: absolute;
top:45%;
}
</style>
</head>
<body>
<div class="parent">
<div class="content">
hello world
</div>
</div>
</body>
</html>
二，文本超出边界显示省略号
单行文本超出省略号
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<html>
<head>
<meta charset='utf-8'>
<title>Page Title</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<style>
.parent{
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
width: 100px;
}
</style>
</head>
<body>
<div class="parent" title="hello world hello world hello world hello world">
hello world hello world hello world hello world
</div>
</body>
</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
<html>
<head>
<meta charset='utf-8'>
<title>Page Title</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<style>
p{
position: relative;
line-height: 20px;
max-height: 40px;
overflow: hidden;
width: 100px;
}
p::after{
content: "...";
position: absolute;
bottom: 0;
right: 0;
padding-left: 40px;
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%);
}
</style>
</head>
<body>
<p class="parent" title="hello world hello world hello world hello world">
hello world hello world hello world hello world
</p>
</body>
</html>