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

    1.      fputs 函数名: fputs  功  能: 送一个字符到一个流中  用  法: int fputs(char *string, FILE *stream); 说明: fputs是一 ...

  2. Libgdx: android单机斗地主支持局域网wifi联网的网络模块核心代码

    这个作品是我近期写的,结合我的毕业设计的通信模块和之前的单机版斗地主.我已经上架到豌豆荚了,贴了点广告,看看能不能赚点茶钱. 但是一点也不乐观.因此我想分享给大家源代码. 仅仅要不用于商业. 以下先贴 ...

  3. 用BFS解决迷宫问题

    在一个n*n的矩阵里走,从原点(0,0)開始走到终点(n-1,n-1),仅仅能上下左右4个方向走.仅仅能在给定的矩阵里走,求最短步数. n*n是01矩阵,0代表该格子没有障碍.为1表示有障碍物. in ...

  4. udev详解【转】

    本文转载自:http://blog.csdn.net/skyflying2012/article/details/9359185 如果你使用Linux比较长时间了,那你就知道,在对待设备文件这块,Li ...

  5. DNS tunnel的原理及实战

    DNS tunnel的原理及实战 摘自:http://netsec.ccert.edu.cn/zhengming/2011/11/01/%E8%BD%AC%E8%BD%BD%EF%BC%9Adns-t ...

  6. javaWeb中URLEncoder.encode编码需要调用两次

    今天碰到一个问题,在Controller类中一个方法跳转到该类中的另一个方法,带着中文参数,在跳转之前对该参数进行编码: msg = java.net.URLEncoder.encode(msg,&q ...

  7. NOIP2013T1 转圈游戏 快速幂

    描述 n 个小伙伴(编号从 0 到 n-1)围坐一圈玩游戏.按照顺时针方向给 n 个位置编号,从0 到 n-1.最初,第 0 号小伙伴在第 0 号位置,第 1 号小伙伴在第 1 号位置, --, 依此 ...

  8. Spring学习笔记之依赖的注解（2）

    Spring学习笔记之依赖的注解(2) 1.0 注解,不能单独存在,是Java中的一种类型 1.1 写注解 1.2 注解反射 2.0 spring的注解 spring的 @Controller@Com ...

  9. 【OpenCV】关于 waitKey（）的使用方法

    C++: int waitKey(int delay=0) cvWaitKey()函数的功能是不断刷新图像,频率时间为delay,单位为ms. 返回值为当前键盘按键值. 所以显示图像时,如果需要在cv ...

  10. Struts2框架学习(二)——访问流程及架构

    1.Struts2的执行流程 从客户端发送请求过来,先经过前端控制器(核心过滤器StrutsPrepareAndExecuteFilter)过滤器中执行一组拦截器(一组拦截器就会完成部分功能代码),拦 ...