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

text-align直接设为justify就行了，text-justify的情况就复杂了，可能有人对它还不熟悉。IE的取值如下：

  • auto :允许浏览器用户代理确定使用的两端对齐法则
  • inter-word :通过增加字之间的空格对齐文本。该行为是对齐所有文本行最快的方法。它的两端对齐行为对段落的最后一行无效
  • newspaper : 通过增加或减少字或字母之间的空格对齐文本。是用于拉丁文字母表两端对齐的最精确格式
  • distribute :处理空格很像newspaper
  • distribute-all-lines:两端对齐行的方式与distribute相同，也同样不包含两段对齐段落的最后一行。适用于表意字文档
  • inter-ideograph : 为表意字文本提供完全两端对齐。他增加或减少表意字和词间的空格

但它最早是作为IE的私有实现，像text-overflow， overflow-x等，在FF很晚才实现，换言之有严格的兼容性问题。并且FF，chrome需要手动在汉字间插入空白或软换行标签才生效，在chrome遇到的阻力就更大了。p>

方案：



.test1 {

      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*/

      .test1:after{

          content:".";

          display: inline-block;

          width:100%;

          overflow:hidden;

          height:0;

      }

  }

  运行代码：

<!DOCTYPE HTML>

<html>

    <head>

        <title>文本两端对齐 </title>

        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

        <style>

            .box1{

                background:red;

                width:30%;

            }

            .test1 {

                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*/

                .test1:after{

                    content:".";

                    display: inline-block;

                    width:100%;

                    overflow:hidden;

                    height:0;

                }

            }

        </style>

    </head>

    <body>

        <div class="box1">

            <div class="test1">姓 名</div>

            <div class="test1">姓 名 姓 名</div>

            <div class="test1">姓 名 名</div>

            <div class="test1">所 在 地</div>

            <div class="test1">工 作 单 位</div>

        </div>

    </body>

</html>

原文地址：https://segmentfault.com/a/1190000016937648

css文本两端对齐的更多相关文章

  1. css 文本两端对齐

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

  2. css之文本两端对齐

    在进行网页设计时,我们经常会看到这样的样式:文本两端对齐. css为我们提供了一个属性可以实现这样的效果:text-align: justify.不过这个只能用来设置多行文本(除最后一行).如果只有单 ...

  3. css之文本两端对齐的两种解决方法

    说起文本对齐,大家都知道text-align,最常用的有left.right.center,今天我们说一下justify,也就是文本两端 对齐.说起来简单,但是有些小坑大家还是要注意的. 现在我们有这 ...

  4. 【原】css实现两端对齐的3种方法

    说到两端对齐,大家并不陌生,在word.powerpoint.outlook等界面导航处,其实都有一个两端对齐(分散对齐)的按钮,平时使用的也不多,我们更习惯与左对齐.居中对齐.右对齐的方式来对齐页面 ...

  5. css文字两端对齐

    css文字两端对齐 text-align:Justify(火狐); text-justify:inter-ideograph(IE) text-justify(IE) 基本语法 text-justif ...

  6. css实现两端对齐的3种方法

    两端对齐在移动端非常见,说到两端对齐,大家并不陌生,在word.powerpoint.outlook等界面导航处,其实都有一个两端对齐(分散对齐)的按钮,平时使用的也不多,我们更习惯与左对齐.居中对齐 ...

  7. CSS实现两端对齐效果

    CSS实现两端对齐效果 两端对齐,从概念上来说,其实不难理解.如果不明白什么叫两端对齐,可以玩玩word等办公软件. 下面谈谈如何实现文本的两端对齐.我所知道的大概有以下几种方法 text-align ...

  8. CSS3 justify 文本两端对齐

    浏览器参照基准:Firefox4 and Later, Chrome5 and Later, Safari5 and Later, Opera10.53 and Later, IE5.5 and La ...

  9. p标签text-align:justify以及CSS文字两端对齐

    p标签样式添加text-align:justify; 那么就会左右对齐. 使用前: 使用后: CSS文字两端对齐 使用前: 代码: <style> div{ width:100px; he ...

随机推荐

  1. HDU 3934

    /*这是用的有旋转卡壳的思想. 首先确定i,j,对k进行循环,知道找到第一个k使得cross(i,j,k)>cross(i,j,k+1),如果k==i进入下一次循环. 对j,k进行旋转,每次循环 ...

  2. Oracle-11-主键约束

    一.Oracle系统一共提供了下面5种约束 1.非空(NOT NULL)约束:所定义的列绝不能为空: 2.唯一(UNIQUE)约束:在表中每一行中所定义的列,其列值不能同样: 3.主键(PARIMAR ...

  3. python使用pytest+pytest报告

    需要安装pytest和pytest-html pip3 install -U pytest pip3 install -U pytest-html

  4. 高可用技术工具包 High Availability Toolkit

    HighAvailabilityToolkit High Availability Toolkit includes several solutions by which achieving arch ...

  5. 【联系】二项分布的对数似然函数与交叉熵（cross entropy）损失函数

    1. 二项分布 二项分布也叫 0-1 分布,如随机变量 x 服从二项分布,关于参数 μ(0≤μ≤1),其值取 1 和取 0 的概率如下: {p(x=1|μ)=μp(x=0|μ)=1−μ 则在 x 上的 ...

  6. JDK8新特性：函数式接口

    一,定义 函数式接口,英文为Functional Interface.首先它是一个接口,那么它与其它接口有什么不同呢?不同点就是在这个接口中只允许有一个抽象方法. 这里的只允许一个抽象方法不包括以下几 ...

  7. php手机号码验证正则表达式

    移动:134.135.136.137.138.139.150.151.152.157.158.159.182.183.184.187.188.178(4G).147(上网卡): 联通:130.131. ...

  8. [原创]一道基本ACM试题的启示——多个测试用例的输入问题。

    Problem Description 输入两点坐标(X1,Y1),(X2,Y2),计算并输出两点间的距离. Input 输入数据有多组,每组占一行,由4个实数组成,分别表示x1,y1,x2,y2,数 ...

  9. main函数解析

    原文链接:http://parisliu2008.blog.163.com/blog/static/95070867200951510412959/ main参数 2009-06-15 10:41:2 ...

  10. 【从零开始】【Java】【3】改造成多模块项目

    闲聊 前几天还是太懒惰了,毕竟也是世界杯期间嘛,可以自我理解的,嘿嘿. 毕竟是从头开始,但是不一定适合所有新入门的人,所以搭框架啊.引入框架什么的,是占据最开始时间比较多的,代码层面的,可能要到靠后面 ...