CSS真正实现文字两端对齐布局

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

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

css实现文字两端对齐效果

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

1、从效果图可以看到，除了要在块级元素加text-align:justify样式外，还需要在里面加一个空的span元素，并应用样式。另外，对于中文还必须用空格隔开汉字，否则也没有两端对齐的效果。英文每个单词都有空格隔开，所以没问题。

2、如果文字一行显示不完，例如下面的代码，需要加上，但是千万不要在需要两端对齐的地方加，如果加上white-sapce：pre-wrap的话，就Firefox和IE就无法很好的实现两端对齐了。

white-space: pre-wrap;
word-break: break-all;

尤其是对于英文字母来说，不加上break-all是不会换行的。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>文字两端对齐</title>
		<style type="text/css">
			* {
				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;
			}
		</style>
	</head>
	<body>
		<h3>借助表格实现文字两端对齐：</h3>
		<table>
			<tr>
				<td class="title">姓名</td>
				<td class="maohao">:</td>
				<td class="detail">好长的名字jkjkjdkajkdjakjdajdkajdaskdjajkdjk</td>
			</tr>
			<tr>
				<td class="title">最高学历</td>
				<td class="maohao">:</td>
				<td class="detail">研究生</td>
			</tr>
			<tr>
				<td class="title">性别</td>
				<td class="maohao">:</td>
				<td class="detail">男</td>
			</tr>
			<tr>
				<td class="title">签名</td>
				<td class="maohao">:</td>
				<td class="detail">没有签名就是我的签名</td>
			</tr>
			<tr>
				<td class="title">Age</td>
				<td class="maohao">:</td>
				<td class="detail">28</td>
			</tr>
			<tr>
				<td class="title">C l a s s</td>
				<td class="maohao">:</td>
				<td class="detail">2</td>
			</tr>
		</table>
		<h3>文字两端对齐：</h3>
		<div id="justify">
			<div class="title">姓名</div>
			<div class="maohao">：</div>
			<div class="detail">好长的名字jkjkjdkajkdjakjdajdkajdaskdjajkdjk</div>
			<div class="title">最高学历</div>
			<div class="maohao">：</div>
			<div class="detail">研究生</div>
			<div class="title">性别</div>
			<div class="maohao">：</div>
			<div class="detail">男</div>
			<div class="title">Class</div>
			<div class="maohao">：</div>
			<div class="detail">2</div>
			<div class="title">A g e</div>
			<div class="maohao">：</div>
			<div class="detail">28</div>
			<div class="title">签名</div>
			<div class="maohao">：</div>
			<div class="detail">没有签名就是我的签名</div>
		</div>
	</body>
</html>

 

以上是 CSS真正实现文字两端对齐布局 的全部内容， 来源链接： utcz.com/a/747.html

回到顶部