CSS 文字两端对齐

电玩女神 2021-10-23 16:22 428阅读 0赞

<!DOCTYPE HTML>
    <html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <style>
            .box1{
                background:red;
                width:20%;
            }
            .scatter {
                text-align:justify;
                text-justify:distribute-all-lines;/*ie6-8*/
                text-align-last:justify;/* ie9*/
                -moz-text-align-last:justify;/*ff*/
                -webkit-text-align-last:justify;/*chrome 20+*/
            }
            @media screen and (-webkit-min-device-pixel-ratio:0){
        /* chrome*/
                .scatter:after{
                    content:".";
                    display: inline-block;
                    width:100%;
                    overflow:hidden;
                    height:0;
                }
            }
        </style>
    </head>
    <body>
    <div class="box1">
        <div class="scatter">姓 名</div>
        <div class="scatter">姓 名 姓 名</div>
        <div class="scatter">姓 名 名</div>
        <div class="scatter">所 在 地</div>
        <div class="scatter">工 作 单 位</div>
    </div>
    </body>
    </html>

http://blog.sina.com.cn/s/blog\_7db0c22a01011emo.html

http://www.cnblogs.com/Travel/p/4552701.html

转载于:https://www.cnblogs.com/potato-lee/p/6179710.html

发表评论取消回复

表情：

评论列表（有 0 条评论，428人围观）

还没有评论，来说两句吧...

相关阅读

相关文字两端对齐

1. 文字两端对齐 text-align-last:justify; text-align:justify;

我不是女神ヾ/ 2023年07月23日 03:31/ 0 赞/ 14 阅读

相关文字两端对齐

文字两端对齐 text-align-last:justify 属性规定如何对齐文本的最后一行。适用于文本只有一行的时候 [见参考][Link 1] ![在这里

爱被打了一巴掌/ 2023年03月04日 11:22/ 0 赞/ 4 阅读

相关 CSS两端对齐解决方案

.labod { font-size: 48upx; text-shadow: 0upx 0upx 1upx 693018;

超、凢脫俗/ 2023年01月02日 08:26/ 0 赞/ 193 阅读

相关 css实现内容两端对齐

问题描述：因行边缘出现符号或其它情况导致行边缘出现多余的空白，如何解决内容区域边缘不期望的空白呢？ ![在这里插入图片描述][20201224102447758.p

快来打我*/ 2022年12月30日 05:00/ 0 赞/ 252 阅读

相关 HTML属性text-align设置文字两端对齐

<!DOCTYPE html> <html> <head> <meta charset="utf-8" http-equiv="" />

亦凉/ 2022年11月29日 05:46/ 0 赞/ 285 阅读

相关 CSS——解决文本溢出／自动换行／文字两端对齐

1 单行文本溢出 .text{ width: 100px;//宽度要定义好 overflow: hidden;//溢出隐藏

青旅半醒/ 2022年05月23日 02:45/ 0 赞/ 428 阅读

相关 CSS小技巧之两行文字两端对齐

假如一个页面需要填写姓名和联系方式，为了使样式美观，通常需要文字两端对齐，即“姓”和“联”对齐，“名”和“式”对齐，通常情况下是很难对齐的： ![在这里插入图片描述][20

约定不等于承诺〃/ 2022年04月24日 05:30/ 0 赞/ 669 阅读

相关 CSS :after伪类元素实现文字两端对齐

以前很多人都这么干过：两个字中间使用来隔开达到四个字的宽度，三个字也可以，但是，如果文字中包含有数字、大小写英文字母时，比如 “122账号”“abc密码” 这样的，就不好计算

た入场券/ 2022年03月18日 10:08/ 0 赞/ 733 阅读

相关 CSS 文字两端对齐

<!DOCTYPE HTML> <html> <head> <title></title> <meta http-equ

电玩女神/ 2021年10月23日 16:22/ 0 赞/ 429 阅读

相关 css 文本两端对齐

在做表单时我们经常遇到让上下两个字段对齐的情况，比如姓名，手机号码，出生地。这样我们就要用到 text-align， text-justify样式了。 text-alig

你的名字/ 2021年05月12日 11:51/ 0 赞/ 650 阅读