css实现文字两端对齐一直以来都是一个令人头痛的事情,我也是经常遇到这样的难题,这次抽点时间整理记录一下。
这里真正实现了文字两端对齐功能,下面是代码,其中上面一种使用的是表格布局,下面的是使用的DIV。
这里有几个要注意的重点:
1、从效果图可以看到,除了要在块级元素加text-align:justify样式外,还需要在里面加一个空的span元素,并应用样式。另外,对于中文还必须用空格隔开汉字,否则也没有两端对齐的效果。英文每个单词都有空格隔开,所以没问题。
2、如果文字一行显示不完,例如下面的代码,需要加上,但是千万不要在需要两端对齐的地方加,如果加上white-sapce:pre-wrap的话,就Firefox和IE就无法很好的实现两端对齐了。
white-space: pre-wrap;
word-break: break-all;
尤其是对于英文字母来说,不加上break-all是不会换行的。
文字两端对齐
* {
padding: 0;
margin: 0;
}
body {
padding: 10px 30px;
}
h3 {
font-size: 16px;
margin: 30px 0 10px;
}
table {
width: 300px;
}
td {
border: 1px #ccc solid;
font-size: 13px;
}
.title {
width: 60px;
height: 22px;
line-height: 22px;
float: left;
text-align: justify;
text-justify: inter-ideograph; /*为了兼容IE*/
text-align-last: justify;/* ie9*/
-moz-text-align-last: justify;/*ff*/
-webkit-text-align-last: justify;/*chrome 20+*/
}
.title:after {
content: ".";
display: inline-block;
width: 100%;
overflow: hidden;
height: 0;
}
.maohao {
line-height: 22px;
width: 10px;
float: left;
}
.detail {
float: left;
width: 220px;
line-height: 22px;
white-space: pre-wrap;
word-break: break-all;
}
#justify {
width: 300px;
height: auto;
font-size: 13px;
}