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

css实现文字两端对齐一直以来都是一个令人头痛的事情,我也是经常遇到这样的难题,这次抽点时间整理记录一下。

这里真正实现了文字两端对齐功能,下面是代码,其中上面一种使用的是表格布局,下面的是使用的DIV。

html中表格中字体两端对齐,CSS真正实现文字两端对齐布局_第1张图片

这里有几个要注意的重点:

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
签名
没有签名就是我的签名

你可能感兴趣的:(html中表格中字体两端对齐)