在做表单时我们经常遇到让上下两个字段对齐的情况,比如姓名, 手机号码, 出生地。这样我们就要用到 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. Linux学习进阶路线图
  2. C# 调用第三方DLL完整实例
  3. SRM 596 DIV 2
  4. VS2012的安装项目只能用InstallShield Limited Edition[附资源下载]
  5. PHP 中 AJAX 中文乱码解决
  6. A + B Problem II---hdu1002
  7. ajax和json详解
  8. Selenium+Java显示等待和隐式等待
  9. HDU1197 Specialized Four-Digit Numbers
  10. 第三章 jQuery中的事件与动画
  11. linux修改主机名+免密认证+关闭防火墙
  12. Spark常见问题汇总
  13. Python Django 配置QQ邮箱发送邮件
  14. Linux 小知识翻译 - 「路径设置」
  15. JAVA记录-IntelliJ Idea 2017 免费激活方法(转载)
  16. requestFullscreen()事件全屏不好使怎么解决
  17. map与pagelayout同步新方法
  18. oracle删除用户及其表空间
  19. JSDoc 注释规范
  20. Android Studio优秀插件汇总

热门文章

  1. ios 中的半屏幕底部弹出框
  2. Python Requests库
  3. spark高级排序彻底解秘
  4. 【转】谁说Vim不是IDE?(二)
  5. zoj 3819 Average Score
  6. action使用大全
  7. iOS UILabel:宽度固定,自动高度显示全部文字
  8. RichTextBox选中文本时往自己的其他的位置实现拖拽
  9. Android开发:Handler Runnable和Thread之间的区别和联系 应用--------------------看完本篇,从此一览无余!
  10. PYTHON queue