在做表单时我们经常遇到让上下两个字段对齐的情况，比如姓名， 手机号码， 出生地。这样我们就要用到 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. 允许远程访问MySQL的设置

    允许远程访问MySQL的设置 学习了:http://www.cnblogs.com/hyzhou/archive/2011/12/06/2278236.html Windows版本有workbench ...

  2. android发送get请求时报错

    异常信息: java.lang.RuntimeException: Unable to start activity ComponentInfo{com.synology.synologycloud/ ...

  3. 项目结构、包、编译为exe！

    一个java源文件里至多有一个public类,该类的名称必须与源文件名称称同样.也能够没有public类.文件名称与随意一个类名一致就可以. 包 类似于cpp的namespace,是对类的再封装,防止 ...

  4. leetcode解题文件夹

    点击打开链接点击打开链接点击打开链接參考文献:http://blog.csdn.net/lanxu_yy/article/details/17848219 只是本文准备用超链接的方式连接到对应解答页面 ...

  5. CentOS 7通过yum安装fcitx五笔输入法

    CentOS 7通过yum安装fcitx五笔输入法 下面通过了亲測: 1.设置源 Posted in Linux at 三月 5th, 2015 / No Comments ? 增加EPEL源 EPE ...

  6. bzoj4247: 挂饰(背包)

    4247: 挂饰 题目:传送门 题解: 看完题目很明显的一道二维背包(一开始还推错了) 设f[i][j]表示前i个挂饰选完(可以有不选)之后还剩下j个挂钩的最大值(j最多贡献为n) 那么f[i][j] ...

  7. MarkDownPad 注册码

    邮箱: Soar360@live.com 授权秘钥: GBPduHjWfJU1mZqcPM3BikjYKF6xKhlKIys3i1MU2eJHqWGImDHzWdD6xhMNLGVpbP2M5SN6b ...

  8. iterator和iterable的区别

    相关博客:  http://blog.csdn.net/lipengcn/article/details/51700153         Java中Iterable和Iterator的辨析 http ...

  9. JavaScript中的工厂方法、构造函数与class

    JavaScript中的工厂方法.构造函数与class 本文转载自:众成翻译 译者:谢于中 链接:http://www.zcfy.cc/article/1129 原文:https://medium.c ...

  10. 我的wordpress在Nginx的配置

    lnmp生成过程 You select the exist rewrite rule:/usr/local/nginx/conf/wordpress.conf Gracefully shutting ...