text-align中justify属性的使用方法

最新推荐文章于 2026-05-30 15:42:23 发布

原创最新推荐文章于 2026-05-30 15:42:23 发布 · 1.2w 阅读

14 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

前端

本文详细介绍了CSS中text-align属性的justify值的使用方法，并通过两个实例展示了如何实现文本的两端对齐效果。

文章目录

前言
一、text-align
总结

前言

学习text-align中justify属性的用法

一、text-align

1.属性介绍

文本排列属性是用来设置文本的水平对齐方式。

文本可居中或对齐到左或右,两端对齐.

当text-align设置为"justify"，每一行被展开为宽度相等，左，右外边距是对齐（如杂志和报纸）

2 实例1

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			p {
				text-algin: justify;
				text-indent: 2rem;
			}
		</style>
	</head>
	<body>
		<p>当我年轻的时候，我梦想改变这个世界；</p>
		<p>当我成熟以后，我发现我不能够改变这个世界，我将目光缩短了些，决定只改变我的国家；</p>
		<p>当我进入暮年以后，我发现我不能够改变我们的国家，</p>
		<p>我的最后愿望仅仅是改变一下我的家庭，但是，这也不可能。当我现在躺在床上，行将就木时，我突然意识到：</p>
		<p>如果一开始我仅仅去改变我自己，然后，我可能改变我的家庭；在家人的帮助和鼓励下，</p>
		<p>我可能为国家做一些事情；然后，谁知道呢?我甚至可能改变这个世界</p>
	</body>
</html>

在这里插入图片描述

3.案例2

css

span {
	width: 100px;
	float: left;
	overflow: hidden;
	text-align: justify;
}

span:after {
	content: '';
	width: 100%;
	display: inline-block;
	height: 0;
}

input {
	width: 100px;
}

html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>justify的使用案例</title>
		<link rel="stylesheet" type="text/css" href="css/justify.css" />
	</head>
	<body>

		<div class="box">
			<span>用户名:</span>
			<input type="text" name='username' />
			<br><br>
			<span>密码:</span>
			<input type="password" />
		</div>

	</body>
</html>