您现在的位置是:首页 > 技术教程 正文

css如何实现文字两端对齐效果

admin 阅读: 2024-03-29
后台-插件-广告管理-内容页头部广告(手机)

想要实现文字两端对齐效果,可以使用CSS的text-align属性。设置text-align: justify;即可实现文字两端对齐效果。

方法1给元素设置 text-align: justify;text-align-last: justify;并且加上text-justify: distribute-all-line; 目的是兼容ie浏览器

p{

            width: 130px;

            text-align: justify;

            text-align-last: justify;

            /*兼容ie*/

            text-justify: distribute-all-lines;

        }

方法2设置 text-align,并且设置伪元素 after或者 before的样式,伪元素中可以添加width:100%或padding-left:100%都可以实现我们所要的效果。

p {

           width: 200px;

            height: 30px;

            text-align: justify;

        }

p::after {

            content: "";

            display: inline-block;

            /* padding-left: 100%; */

            width: 100%;

        }

注意:text-align-last: justify;只对中文文字起效果,而对于数字和英文字母则需要使用空格间隔开,再使用上述两种方法之一,就可以实现文字两端对齐了!

标签:
声明

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

在线投稿:投稿 站长QQ:1888636

后台-插件-广告管理-内容页尾部广告(手机)
关注我们

扫一扫关注我们,了解最新精彩内容

搜索