css样式换行缩进技巧
CSS中实现文本换行时缩进，可以使用text-indent属性配合padding-left或者margin-left。以下是一个简单的例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>换行缩进示例</title>
<style>
.indent-example {
width: 200px; /* 限定宽度 */
border: 1px solid #000; /* 边框，便于观察 */
padding-left: 20px; /* 内边距缩进 */
text-indent: -20px; /* 首行缩进的相反值 */
margin-left: 20px; /* 外边距缩进 */
white-space: normal; /* 保证文本可以换行 */
}
</style>
</head>
<body>
<div class="indent-example">
这是一个示例文本，它将展示如何在CSS中实现文本换行时的缩进。这行文本将会缩进，因为它是第二行，而第一行保持不缩进。
</div>
</body>
</html>在这个例子中，.indent-example类设置了一个宽度，并且通过text-indent属性实现了首行缩进。由于text-indent的值是负数，它会使得第一行文本看起来没有缩进，但是从第二行开始，文本会根据text-indent的值缩进。如果你想要使得所有行都缩进，可以移除text-indent属性，并使用padding-left来实现。
评论已关闭