如何使用css实现文本两端对齐

发布时间:2022-03-01 09:42:35 作者:小新
来源:亿速云 阅读:160

这篇文章主要为大家展示了“如何使用css实现文本两端对齐”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“如何使用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>

  方案:

  .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;/*chrome20+*/

  }

  @mediascreenand(-webkit-min-device-pixel-ratio:0){/*chrome*/

  .test1:after{

  content:".";

  display:inline-block;

  width:100%;

  overflow:hidden;

  height:0;

  }

  }

  运行代码:

  <!DOCTYPEHTML>

  <html>

  <head>

  <title>文本两端对齐</title>

  <metahttp-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;/*chrome20+*/

  }

  @mediascreenand(-webkit-min-device-pixel-ratio:0){/*chrome*/

  .test1:after{

  content:".";

  display:inline-block;

  width:100%;

  overflow:hidden;

  height:0;

  }

  }

  </style>

  </head>

  <body>

  <divclass="box1">

  <divclass="test1">姓名</div>

  <divclass="test1">姓名姓名</div>

  <divclass="test1">姓名名</div>

  <divclass="test1">所在地</div>

  <divclass="test1">工作单位</div>

  </div>

  </body>

  </html>

以上是“如何使用css实现文本两端对齐”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注亿速云行业资讯频道!

推荐阅读:
  1. css文本两端对齐
  2. 使用css怎么实现文本两端对齐

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

css

上一篇:如何使用css实现文字竖排

下一篇:如何使用纯CSS实现两个球相交的粘粘效果

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》