介绍,,/*半角的不断行的空白格*/,ensp;/*半角的空格*/,emsp;/*全角的空格*/ & lt; p>职务:& lt; span> & lt;/span> & lt;/p> css: p {
宽度:200 px;
text-align:证明;
}
p{跨度
显示:inline-block;
宽度:100%;
}
小编给大家分享一下CSS实现文字两端对齐的方法是什么,希望大家阅读完这篇文章后大所收获、下面让我们一起去探讨吧!
最近的项目遇到了这样的需求:(要求标题部分不管文字多少,都必须两端对齐)
如下图:
当时也没有多想直接使用“进行代替,毕竟产品同学想快一点看到效果,不敢怠慢!不过到第二个页面就傻眼了。
如图:
这很明显”已经无法满足我了,只好上
页面效果倒是有了,但是后面复盘的时候发现这样的写法一是不灵活(虽然这里是固定内容),二是不够语义化,所以自然想通过css的方式来解决,在text-align中我们可能用到最多的是中心属性,还有一个属性是证明(两端对齐),不过页面刷新后并没有(菜肴)用。其实这里的
因此我们需要借助一个空标签。html:
这里最完美的做法是使用::后伪元素代替空标签。
PS:后面查阅资料发现text-align-last:证明;可以实现最后一行两端对齐,但似乎兼容性很差(Safari不支持)
CANIUSE (https://caniuse.com/搜索=text-align-last)
看完了这篇文章,相信你对CSS实现文字两端对齐的方法是什么有了一定的了解,想了解更多相关知识,欢迎关注行业资讯频道,感谢各位的阅读!
