css 文本两端对齐
在做表单时我们经常遇到让上下两个字段对齐的情况,比如姓名, 手机号码, 出生地。这样我们就要用到 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群与朋友们在聊这问题,最后由一丝给出究极方案:
.test 1 { |
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*/ |
.test 1: after{ |
content : "." ; |
display : inline- block ; |
width : 100% ; |
overflow : hidden ; |
height : 0 ; |
} |
} |
css 文本两端对齐的更多相关文章
- css文本两端对齐
在做表单时我们经常遇到让上下两个字段对齐的情况,比如姓名, 手机号码, 出生地.这样我们就要用到 text-align, text-justify样式了. text-align直接设为justify就 ...
- css之文本两端对齐
在进行网页设计时,我们经常会看到这样的样式:文本两端对齐. css为我们提供了一个属性可以实现这样的效果:text-align: justify.不过这个只能用来设置多行文本(除最后一行).如果只有单 ...
- css之文本两端对齐的两种解决方法
说起文本对齐,大家都知道text-align,最常用的有left.right.center,今天我们说一下justify,也就是文本两端 对齐.说起来简单,但是有些小坑大家还是要注意的. 现在我们有这 ...
- 【原】css实现两端对齐的3种方法
说到两端对齐,大家并不陌生,在word.powerpoint.outlook等界面导航处,其实都有一个两端对齐(分散对齐)的按钮,平时使用的也不多,我们更习惯与左对齐.居中对齐.右对齐的方式来对齐页面 ...
- css文字两端对齐
css文字两端对齐 text-align:Justify(火狐); text-justify:inter-ideograph(IE) text-justify(IE) 基本语法 text-justif ...
- css实现两端对齐的3种方法
两端对齐在移动端非常见,说到两端对齐,大家并不陌生,在word.powerpoint.outlook等界面导航处,其实都有一个两端对齐(分散对齐)的按钮,平时使用的也不多,我们更习惯与左对齐.居中对齐 ...
- CSS实现两端对齐效果
CSS实现两端对齐效果 两端对齐,从概念上来说,其实不难理解.如果不明白什么叫两端对齐,可以玩玩word等办公软件. 下面谈谈如何实现文本的两端对齐.我所知道的大概有以下几种方法 text-align ...
- CSS3 justify 文本两端对齐
浏览器参照基准:Firefox4 and Later, Chrome5 and Later, Safari5 and Later, Opera10.53 and Later, IE5.5 and La ...
- p标签text-align:justify以及CSS文字两端对齐
p标签样式添加text-align:justify; 那么就会左右对齐. 使用前: 使用后: CSS文字两端对齐 使用前: 代码: <style> div{ width:100px; he ...
随机推荐
- 使用.htaccess实现apache URL重定向
一.什么是URL重定向? URL重定向(URL redirection,或称网址重定向或网域名称转址),是指当使用者浏览某个网址时,将他导向到另一个网址的技术. 二.URL重定向怎么配置? 1)首先需 ...
- [T-SQL]从变量与数据类型说起
1.变量 学习计算机语言,难免不碰到这个名词,不过咱这里说的是MSSQL(微软SQL Server产品)里的数据库语言实现. 稍微对程序比较严谨的语言都要求使用之前都要声明变量先,比如c.c++,j ...
- 关于 vim每次w时都提示 “E509: 无法创建备份文件 (请加 ! 强制执行)”
今天网上git下vim的配置后v只要执行:wq就会出现这样的话,找了点资料说是没有.vimbk文件夹,我加了也没用,后来发现在root权限下就不会出现这样的问题,然后我就把当前文件夹下所以的有关vim ...
- C#写的笔记管理软件
在VS2008中做的 附件:http://ys-e.ys168.com/2.0/276581430/j4G4J63367LMMJUJjsgW/CSHARP_WinCtrl21t_2014%E5%B9% ...
- richTextBoxFontClass
使用 private void button1_Click(object sender, EventArgs e) { RichTextBoxCtrl.richTextBoxFontClass r = ...
- 如何查看电脑的链接WIFI密码
这个查看起来确实有难度,一般软件也难以破解.不如你试试在浏览器输入192.168.1.1,账户密码都是admin然后进入路由设置里.无线安全设置里有.
- iOS组件化思路-大神博客研读和思考
一.大神博客研读 随着应用需求逐步迭代,应用的代码体积将会越来越大,为了更好的管理应用工程,我们开始借助CocoaPods版本管理工具对原有应用工程进行拆分.但是仅仅完成代码拆分还不足以解决业务之间的 ...
- CGI初识
---恢复内容开始--- 转自http://www.moon-soft.com/program/bbs/readelite887957.htm 用 C/C++ 写 CGI 程序 小传(zhcharle ...
- git 远程追踪
$ git branch --set-upstream-to origin/master http://stackoverflow.com/questions/21729560/how-to-make ...
- RedHat7搭建MongoDB集群
下载RPM安装包# wget -c -r -N -np -nd -L -nH https://repo.mongodb.org/yum/redhat/7/mongodb-org/stable/x86_ ...