几种方法实现自适应的有文字分割线

发表于 | 阅读次数

在写页面的时候我们经常需要写一些带文字的分割线。我们需要横线垂直居中，文字水平居中，并且横线的长度能根据文字长度自适应。类似这样：
image
为此我参考了一些插件的做法，加上自己的一些思考，总结出以下三种写法：

使用table-cell以及背景图片（vux以及Cola-UI的写法）

这个方法主要应用了table-cell的自适应特性，再配合使用background-position将北京图片居中。为了减少http请求，此处的图片采用base64。

1
2
3
<div class="divider">
	自适应小标题
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
.divider{
	text-align: center; 
	display: table;
	white-space: nowrap;/*不然文字会被挤成一行一个字*/
	height: 50px;
	line-height: 50px;
	font-size: 16px;
	color:#353535;
}
.divider:before,.divider:after{
	content: '';
	display: table-cell;
	width: 50%; /*设置50%是为了确保能自适应文字宽度，最小的时候也能占满一行，如果有文字就会挤开*/
	background-repeat: no-repeat;
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABaAAAAACCAYAAACuTHuKAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyFpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo1OThBRDY4OUNDMTYxMUU0OUE3NUVGOEJDMzMzMjE2NyIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo1OThBRDY4QUNDMTYxMUU0OUE3NUVGOEJDMzMzMjE2NyI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjU5OEFENjg3Q0MxNjExRTQ5QTc1RUY4QkMzMzMyMTY3IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjU5OEFENjg4Q0MxNjExRTQ5QTc1RUY4QkMzMzMyMTY3Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+VU513gAAADVJREFUeNrs0DENACAQBDBIWLGBJQby/mUcJn5sJXQmOQMAAAAAAJqt+2prAAAAAACg2xdgANk6BEVuJgyMAAAAAElFTkSuQmCC);
}
.divider:before{
	background-position: right 1em top 50%;
}
.divider:after{
	background-position: left 1em top 50%;
}

使用flex-box

这个方法主要是利用了flex-box中自动撑满空间的特性，以及align-items:center。优点是代码简洁优雅，缺点是兼容性稍差。

1
2
3
4
5
<div class="title">
	<div class="line"></div>
	<div class="text">自适应标题</div>
	<div class="line"></div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.title{
	display: flex;
	flex-direction: row;
	align-items: center; /*垂直居中*/
	width:100%;
}
.line{
	flex:1; /*自动撑满剩余空间*/
	border-top: 1px solid #353535; /*使用border制作横线*/
}
.text{
	font-size: 16px;
	margin:0 10px;
	color:#353535;
}

利用table-cell的自动撑满特性以及vertical-align特性

这个是我自己根据前两个方案总结出来的。其实实现这种分割线的要点在于实现自动撑满空间，以及垂直居中。恰好table-cell都能做到这两点。

我提出的这个方法缺点是html结构有点复杂。

1
2
3
4
5
6
7
8
9
<div class="divider">
	<div class="line-container">
		<div class="line"></div>
	</div>
	<div class="text">自适应小标题</div>
	<div class="line-container">
		<div class="line"></div>
	</div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
.divider{
	display: table;
	font-size: 16px;
	color: #353535;
	height: 30px;
	line-height: 30px;
	width: 100%;
}
.line-container{
	display: table-cell;
	width: 50%;
	vertical-align: middle; /*让table-cell内部的元素垂直居中*/
	padding: 0 10px;
}
.line{
	width: 100%; /*内部元素的长度撑满父元素即可*/
	border-top: 1px solid #353535;/*跟之前一样用border实现横线*/ 
}
.text{
	white-space: nowrap;/*跟之前一样避免文字被挤成一个字一行*/
}

以上就是我收集、提出的三种实现自适应文字分割线的方法，欢迎大家提出修改意见：）