github地址：words-line
这里总结了五种关于文字两边添加横线的方法。
欢迎补充！
最近的项目的设计经常用到文字两边添加横线的方法,这样看上去简洁明了,当然实现的方法也五花八门.
暂且不说哪种方法好，邓爷爷说过不管黑猫白猫抓到老鼠就是好猫.
详细说明
在现代浏览器中浏览,全部可以正常显示.
*第一种情况:
是用的标签类名最为多的一个,而实际上会用到这样去写的很少,而且随着伪类的出现,实现起来更加方便,但这个的兼容性好啊...
优: 兼容性强
弊: 繁琐
*第二种情况:
实际上使用:before 跟 :after 伪类写成的,左右比例可以自由调节.但头痛的是IE7一下用不了T T
优: 灵活性高
弊: 兼容性弱
*第三种情况:
这是两个特别冷门的标签 fieldset legend 在W3C里面解释说
fieldset:组合表单中的相关元素
legend为 fieldset 元素定义标题（caption）.
据我了解:这两货是HTML4的产物,而在H5之后添加了3个新的属性. 所以这两货兼容性也不差 [说错的地方希望指正] 但是在例子当中, 它们对text-align:center特别不友好, 所以我在IE8- FF Safari Chrome 单独做了hack
优: 兼容性好啊 贤心的layer说明文档页面就有用这个
弊: ---
第四种情况:
...这个可以不说明,就是请求的时候要多一张图片,建议图片做长一些.压缩一下. 我这里用了10001的尺寸,原图957B,压缩之后107B
优: 自己衡量
弊: ----
*第五种情况:
其实也是使用伪类去写的,只不过相比第二种少了一个伪类
优: 自己衡量
弊: IE7下看不到横线了
*第六种情况:
使用:before :after写的 优: 自适应性很好
弊: 兼容性不好，用到flex transform css3写法
如果需要字数限制，可以在a标签加上
.sixth .sixth_main a {
padding: 0 15px;
flex-basis: 50%; //大小根据字数而定
text-align: center;
}
总结一下:
一般情况下,wap端我会使用第二或者第五中（第六种）兼容性很好，感谢评论区@[深海哥哥]到的(https://www.jianshu.com/u/5e65e759535c)的提示
注意第一、五种情况,文字都是有用白色为背景色的,如果遇到底色为纯色的情况下还可以继续用,但是如果是图片为背景的话,要么切图对准,要么就换种方法吧,少折腾
github地址：words-line
网友评论