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

    这道题唯一一个注意的地方是,如出现X\/Y=0这种关系时,X=0,Y=0.已经是可以肯定的关系了,所以可以连边X->-X. 我也错了上面这地方.看来,还不够.以后要细心才好. #include ...

  2. 【小超_Android】GitHub源码项目整理,希望对大家有帮助

    收集的经常使用Github上比較优秀的项目,希望对大家日常开发有所帮助: AndroidSlidingMenu   https://github.com/jfeinstein10/SlidingMen ...

  3. LeetCode96_Unique Binary Search Trees(求1到n这些节点能够组成多少种不同的二叉查找树) Java题解

    题目: Given n, how many structurally unique BST's (binary search trees) that store values 1...n? For e ...

  4. 安卓离线SDK Windows版 资源包下载地址全集

    1.Tools    https://dl-ssl.google.com/android/repository/platform-tools_r19.0.1-windows.zip https://d ...

  5. 《从零開始学Swift》学习笔记（Day 56）—— Swift编码规范之命名规范

    原创文章,欢迎转载.转载请注明:关东升的博客 程序代码中到处都是自定义的名字,取一个有样而且符合规范的名字非常重要. 命名方法非常多,可是比較有名的,广泛接受命名法有: 匈牙利命名,一般仅仅是命名变量 ...

  6. 最长公共子序列 nlogn

    先来个板子 #include<bits/stdc++.h> using namespace std; , M = 1e6+, mod = 1e9+, inf = 1e9+; typedef ...

  7. Linux - 目录结构与查看，复制，删除，剪切指令

    Linux当中,一切皆文件. Linux目录结构 / 根分区,只有root用户对此目录拥有写权限. /etc 配置文件 /boot 启动文件 /var 可增长的目录 .日志,文件等. /root 管理 ...

  8. NET中的池

    NET中的各种池 在.NET中,常用到的池有四个:字符串拘留池.线程池 .应用程序池.数据库连接池. 字符串拘留池 在.NET中字符串是不可变对象,修改字符串变量的值会产生新的对象.为降低性能消耗及减 ...

  9. 【Codeforces 105D】 Bag of mice

    [题目链接] http://codeforces.com/contest/148/problem/D [算法] 概率DP f[w][b]表示还剩w只白老鼠,b只黑老鼠,公主胜利的概率,那么 : 1. ...

  10. (Go)01.Windows 安装 Go语言开发环境以及使用

    一.Go语言下载 go语言官方下载地址:https://golang.org/dl/ 找到适合你系统的版本下载,本人下载的是windows msi版本.也可以下载Source自己更深层次研究go语言 ...