前端技术 手机教程
程序开发 平面动画
系统软件 CMS教程
CMS教程 在线手册
网页模板 网络安全
精准搜索请尝试:精确搜索

text-align:justify无效的原因及解决办法

2021-12-28 16:51:45 来源:原创 作者:寂静的神经

在 css 中,使用 text-align:justify 可以实现文字两端对齐,但有的时候却无效,原因是:该属性对文本的最后一行无效!也就是如果文字内容只有一行时(视为最后一行)或者多行文本的最后一行是无法实现两端对齐的。

知道了问题的原因后,就很容易想到解决方法了。

本站推荐以下两种解决方法:

1.给文本之后再增加一个标签,使文本不再是最后一行

2.给文字段落增加 after 伪元素

示例:


<style>
.first{width:500px;height:50px;background:#d2e428;text-align:justify;padding:5px;margin-top:30px}
.three{width:100%;display:inline-block}
.four:after{content:'';width: 100%;display: inline-block;overflow: hidden;height: 0;}
</style>
<div class="first">
    <span class="second">零五网[https://www.02405.com] 通过增加空白行实现单行文本两端对齐</span>
    <p class="three"></p>
</div>
<div class="first">
    <span class="four">零五网[https://www.02405.com] 通过after伪类实现单行文本两端对齐</span>
</div>

效果:

零五网[https://www.02405.com] 通过增加空白行实现单行文本两端对齐  
零五网[https://www.02405.com] 通过after伪类实现单行文本两端对齐
本文关键词:text-align justify

相关文章

零五网,分享IT知识,国内顶级IT知识门户网站。

Copyright (C) www.02405.com, All Rights Reserved.

零五网 版权所有 辽ICP备13002105号-1