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;
}
