注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

梦幻雪冰

技在手,能在身,思在脑,从容过生活——陈能堡

 
 
 

日志

 
 

CSS 文字两端对齐  

2015-01-23 22:40:05|  分类: HTML&&CSS |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

CSS 文字两端对齐

今天HTML5-2班的学员问了如何实现CSS两端对齐,所以在这给大家进行分享一下。在其自然状态下,"text-align:justify"就不能工作,除非内容足够长并引起一个换行符。否则,文本仍然左对齐。如果你想知道这是为什么,这是因为在排版中这是理想的行为——一个块中的最后一行文本总是左对齐。也许这是一个CSS规范设计,即使我们只有一行文本,这一行还是像最后一行一样,让文本左对齐。
欢迎学习交流-----梦幻雪冰
两端对齐效果失效如下:
CSS 文字两端对齐 - 梦幻雪冰 - 梦幻雪冰

 具体代码如下:

<!DOCTYPE HTML>
<html>
<head>
<title>独行冰海、梦幻雪冰</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="reset.css"/>
<style>
.box div {
width:200px;
height:18px;
border:1px solid blue;
color:red;
font-size:15px;
text-align: justify;
}
</style>
</head>
<body>
<div class="box">
<div class="one">独 行 冰 海</div>
<div class="two">梦 幻</div>
<div class="three">雪 冰</div>
</div>
</body>
</html>


如何解决不能实现两端对齐的效果呢?

上图展示的是没有一个打破元素,因为没有足够元素来打破线(没有换行符),所有元素将左对齐利。我们可以利用伪元素来产生一个换行符,由于其宽度为100%,打破元素前面的所有行内元素实现两端对齐。欢迎学习交流-----梦幻雪冰
效果如下(雪冰这两个字):
CSS 文字两端对齐 - 梦幻雪冰 - 梦幻雪冰
 
代码如下:

<!DOCTYPE HTML>
<html>
<head>
<title>独行冰海、梦幻雪冰</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="reset.css"/>
<style>
.box div {
width:200px;
height:18px;
border:1px solid blue;
color:red;
font-size:15px;
text-align: justify;
}
.box .three:after{
overflow:hidden;
display: inline-block;
height:0;
width:100%;
content:"\200B";
}

</style>
</head>
<body>
<div class="box">
<div class="one">独 行 冰 海</div>
<div class="two">梦 幻</div>
<div class="three">雪 冰</div>
</div>
</body>
</html>

注意:另外,对于中文还必须用空格隔开汉字,否则也没有两端对齐的效果。英文每个单词都有空格隔开,所以没问题。

推荐一个不错的兼容多个浏览器的CSS两端对齐源代码:

<!DOCTYPE HTML>
<html>
<head>
<title>独行冰海、梦幻雪冰</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style>
.box1{
background:red;
width:180px;
}
.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;
}
}
</style>
</head>
<body>
<div class="box1">
<div class="test1">姓 名</div>
<div class="test1">姓 名 姓 名</div>
<div class="test1">姓 名 名</div>
<div class="test1">所 在 地</div>
<div class="test1">工 作 单 位</div>
</div>
</body>
</html>

声明:资料来源于互联网

推荐博客:独行冰海
欢迎学习交流-----
梦幻雪冰
  评论这张
 
阅读(204)| 评论(8)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017