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

    近期项目中常常使用Html5而Android与JS调用常常会用到,这里记录一下,測试系统5.0以上. 这里先贴一下源代码 Activity: package jwzhangjie.com.webvie ...

  2. Google TPU 揭密——看TPU的架构框图，矩阵加乘、Pool等处理模块，CISC指令集，必然需要编译器

    Google TPU 揭密 转自:https://mp.weixin.qq.com/s/Kf_L4u7JRxJ8kF3Pi8M5iw Google TPU(Tensor Processing Unit ...

  3. Python 字典（dict）操作（update）

    1. get 注意以下两种形式的细微差别,差别在返回值的类型上: d.get(value, '') d.get(value, ['']) >> d = {} >> d.get( ...

  4. A - Presents

    Problem description Little Petya very much likes gifts. Recently he has received a new laptop as a N ...

  5. C#操作Mysql类

    using System;using System.Collections.Generic;using System.Text;using System.Data;using System.Text. ...

  6. C# 委托、事件

    委托(delegate) 访问修饰符 delegate 返回值类型 委托名 (参数列表) 委托是一种可以把引用存储为函数的类型,也就是说它声明了一种用于保存特定格式函数的数据类型,如图C++中的函数指 ...

  7. url 域名 主机名

    1. url = 协议//主机名(包括服务器的计算机名+域名)/路径 https:// i. cnblogs.com /index.html .com是顶级域名,从右向左,每碰到一个".&q ...

  8. 常用JQUERY插件大全

    jQuery内容滚动插件-BoxSlider jQuery artDialog对话框插件 移动端日期选择组件 图像延迟加载库Echo.js 轮播图FlexSlider插件 Slick.js幻灯片使用方 ...

  9. MySQL 5.6 Reference Manual-14.7 InnoDB Table Compression

    14.7 InnoDB Table Compression 14.7.1 Overview of Table Compression 14.7.2 Enabling Compression for a ...

  10. MIME类型记录

    Content-Disposition: attachment; filename="filename.xls" 提供下载