本文介绍: 设置 textalign,并且设置伪元素 after或者 before样式,伪元素中可以添加width:100%或paddingleft:100%都可以实现我们所要的效果。想要实现文字两端对齐效果,可以使用CSS的textalign属性数字英文字母需要使用空格间隔开,再使用上述两种方法之一,就可以实现文字两端对齐了!

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

方法1给元素设置 textalign: justify;textalignlast: justify;并且加上textjustify: distributeallline; 目的是兼容ie浏览器

p{

            width: 130px;

            textalign: justify;

            text-align-last: justify;

            /*兼容ie*/

            text-justify: distribute-all-lines;

        }

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

p {

           width: 200px;

            height: 30px;

            text-align: justify;

        }

p::after {

            content: “”;

            displayinlineblock;

            /* padding-left: 100%; */

            width: 100%;

        }

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

原文地址:https://blog.csdn.net/weixin_49054076/article/details/129804365

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任

如若转载,请注明出处:http://www.7code.cn/show_48012.html

如若内容造成侵权/违法违规/事实不符,请联系代码007邮箱suwngjj01@126.com进行投诉反馈,一经查实,立即删除

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注