html中表格中字体两端对齐,CSS真正实现文字两端对齐布局

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;

}

借助表格实现文字两端对齐：

姓名	:	好长的名字jkjkjdkajkdjakjdajdkajdaskdjajkdjk
最高学历	:	研究生
性别	:	男
签名	:	没有签名就是我的签名
Age	:	28
C l a s s	:	2

文字两端对齐：

姓名

：

好长的名字jkjkjdkajkdjakjdajdkajdaskdjajkdjk

最高学历

：

研究生

性别

：

男

Class

：

2

A g e

：

28

签名

：

没有签名就是我的签名