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

这两天一直在QQ群与朋友们在聊这问题,最后由一丝给出究极方案:

.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;
      }
  }

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. HW4.19

    public class Solution { public static void main(String[] args) { for(int i = 1; i <= 8; i++) { fo ...

  2. ROS学习笔记(九)——ROSSERVICE

    NEW 1 $ roscore NEW 2 $ rosrun turtlesim turtlesim_node NEW 3 $ rosrun turtlesim turtle_teleop_key N ...

  3. 如何解决因为找不到Notepad++的安装路径而导致的不能更新CS-Script的问题

    博客搬到了fresky.github.io - Dawei XU,请各位看官挪步.最新的一篇是:如何解决因为找不到Notepad++的安装路径而导致的不能更新CS-Script的问题.

  4. Zend Framework 2参考Zend\Authentication(摘要式身份验证)

    Zend Framework 2参考Zend\Authentication(摘要式身份验证) 介绍 摘要式身份验证是HTTP身份验证的方法,提高了基本身份验证时提供的方式进行身份验证,而无需在网络上以 ...

  5. PostgreSQL9.5 新特性

    PostgreSQL9.5 新特性 PostgreSQL9.5:Foreign Table Inheritance PostgreSQL9.5:Row-Level Security Policies ...

  6. Araxis Merge Professional v2014.4565 特别版 | 文件比较合并

    http://www.ttrar.com/html/AraxisMerge.html Araxis Merge 是一个可视化的文件比较.合并和同步的软件,能够方便的被软件工程师和 web 站点开发者使 ...

  7. MVC Controller return 格式

    所看到的Action都是return View();我们可以看作这个返回值用于解析一个aspx文件.而它的返回类型是ActionResult如 public ActionResult Index()  ...

  8. [MySQL] MySQL的自己主动化安装部署

    有过MySQL运维的人应该都清楚,线上的MySQL一般都採用源代码编译,由于这样才干够依据企业的各自须要选择要编译的功能,尽管MySQL的源代码编译挺简单的,可是试想一下,假设你有几百台server同 ...

  9. 百度的android采访分析

    今天早上10分,我接到一个电话采访百度.当然,我说提前.我的病是多么强烈延迟.所以我也没怎么准备,当然,我也看他们的真实水平的思考.在这次审查中! ! ! ! ! !! .! ! ! !.!! !.! ...

  10. 功能模块图、业务流程图、处理流程图、ER图,数据库表图(概念模型和物理模型)画法

    如果你能使用计算机规范画出以下几种图,那么恭喜你,你在我这里被封为学霸了,我膜拜ing-- 我作为前端开发与产品经理打交道已有5-6年时间,产品经理画的业务流程图我看过很多.于是百度搜+凭以往经验脑补 ...