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

最新文章

  1. 关于CryptoJS中md5加密以及aes加密的随笔
  2. iOS——Core Animation 知识摘抄(三)
  3. Android动画学习笔记-Android Animation
  4. 超链接的#和javascript:void(0)的区别
  5. Maven提高篇系列之(一)——多模块 vs 继承
  6. GridView总结一:GridView自带分页及与DropDownList结合使用
  7. 使用Ajax与服务器端通信
  8. Qt 2D绘图 渐变填充(三种渐变方式)
  9. ifconfig报错:SIOCSIFFLAGS: Operation not permitted
  10. linux安装问题
  11. nodejs发展
  12. Struts2之ajax初析
  13. springMVC3学习(二)--ModelAndView对象
  14. [转] __thread关键字
  15. compass模块
  16. 借贷宝推广得现金是真的_注册就送人民币20元_邀请码CRJYQTK
  17. sudo su– user
  18. DISUBSTR - Distinct Substrings
  19. golang sql database drivers
  20. Django+Bootstrap+Mysql 搭建个人博客(六)

热门文章

  1. java的主函数中各个词的作用
  2. JAVA 面向对象-2-继承(Inheritance)
  3. ios xcode如何在控制台打印frame
  4. Android 获取手机总内存和可用内存等信息
  5. Android 获取WIFI MAC地址的方法
  6. Spark 1.0.0版本号公布
  7. poj 1149 Pigs 网络流-最大流 建图的题目(明天更新)-已更新
  8. richTextBox插入表格
  9. android之TabWidget选项卡
  10. java多线程之消费者生产者模式 (转)