<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>文本两端对齐</title>
<style>
.demo {background:#fff}
.demo-text p{
overflow:hidden;
width:200px;
line-height:24px;
margin:0 auto 10px;
border:1px solid #ccc;
background:#eee;
}
/* justify for All */
.text-justify p{
text-align:justify;
text-align-last:justify;
}
.single-line-justify p{
height:24px;
}
.single-line-justify p:after{
display:inline-block;
content:'';
overflow:hidden;
width:100%;
height:0;
}
</style>
</head>
<body>
<div class="wrap">
<h1>Web 文本两端对齐</h1>
<p class="browser">浏览器参照基准：IE5.5+, Firefox4+, Chrome5+, Safari5+, Opera10.53+ </p>
<p>两端对齐方案基于 text-align:justify 及 text-align-last:justify 实现</p>
<div class="demo demo-text text-justify single-line-justify">
<h3 class="tc">综合兼容实现</h3>
<p>世 界 末 日 2012</p>
<p>把 钱 都 花 了 ？</p>
<p>末 日 没 来</p>
<p>傻 了 吧</p>
</div>
</div>
</body>
</html>
3258
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
