CSS里的宽度与高度

发布 : 2019-06-03 分类 : CSS 浏览 :

1、文字两端对齐

HTML代码:

1
2
3
4
5
6
7
<body>
<div>
<span>姓名</span><br>
<span>联系方式</span><br>
<span>工作经验</span>
</div>
</body>

CSS代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
div {
border: 1px solid blue;
font-size: 20px;
}
span {
border: 1px solid green;
display: inline-block;
width: 5em;
text-align: justify;
line-height: 20px;
overflow: hidden;
height: 20px;
}
span::after {
content: '';
display: inline-block;
width: 100%;
border: 1px solid red;
}

代码样式:
文字两端对齐

2、清除空格

HTML代码:

1
2
3
4
5
6
7
8
9
10
<body>
<div>
<ul class="clearfix">
<li>题目1</li>
<li>题目2</li>
<li>题目3</li>
<li>题目4</li>
</ul>
</div>
</body>

CSS代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
ul {
margin: 0;
padding: 0;
list-style: none;
border: 1px solid green;
}
ul>li {
float: left;
border: 1px solid red;
}
.clearfix::after {
content: '';
display: block;
clear: both;
}

代码样式:
清除空格

3、单行文本省略

HTML代码:

1
2
3
4
5
<body>
<div>
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
</div>
</body>

CSS代码:

1
2
3
4
5
6
div {
border: 1px solid red;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

代码样式:
单行文本省略

4、多行文本省略

HTML代码:

1
2
3
4
5
<body>
<div>
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
</div>
</body>

CSS代码:

1
2
3
4
5
6
7
div {
border: 1px solid red;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}

代码样式:
多行文本省略

5、文字垂直居中

HTML代码:

1
2
3
4
5
<body>
<div>
1 2 3 4 5 6 7 8 9 10
</div>
</body>

CSS代码:

1
2
3
4
5
6
7
/*border会占据空间,改为outline就可以了*/
div {
border: 1px solid red;
line-height: 24px;
padding: 8px 0;
text-align: center;/*水平居中*/
}

代码样式:
文字垂直居中

注意:div的高度是由它内部文档流中元素总和决定的。

本文作者 : LqZww
原文链接 : http://yoursite.com/2019/06/03/css-li-de-kuan-du-yu-gao-du/
版权声明 : 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明出处!
支付宝扫一扫, 向我赞赏

支付宝扫一扫, 向我赞赏

微信扫一扫, 向我赞赏

微信扫一扫, 向我赞赏

留下足迹