css悬挂缩进

CSS悬挂缩进（Hanging Indentation）是一种文本排版样式，主要用于列表项的缩进处理。在这种样式中，列表项的第一行文本与后续行的文本不在同一水平线上，第一行文本通常与列表的标记对齐，而后续行的文本则相对于第一行有一定的缩进。

基础概念

悬挂缩进通常用于提高文本的可读性和美观性，特别是在长列表项中。它可以帮助读者更容易地区分不同的列表项，并且使文本看起来更加整洁。

类型

悬挂缩进主要应用于以下几种类型的列表：

无序列表（ul）
有序列表（ol）
定义列表（dl）

应用场景

悬挂缩进常用于以下场景：

技术文档：如API文档、用户手册等。
新闻列表：在新闻网站或博客中，用于列出文章标题和摘要。
代码注释：在代码文件中，用于注释说明。

实现方法

在CSS中，可以通过设置text-indent和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>
        ul {
            list-style-type: none; /* 移除默认列表样式 */
            padding-left: 0; /* 移除默认内边距 */
        }
        li {
            text-indent: -2em; /* 设置悬挂缩进 */
            padding-left: 2em; /* 补偿悬挂缩进后的空白 */
        }
    </style>
</head>
<body>
    <ul>
        <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
        <li>Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
        <li>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</li>
    </ul>
</body>
</html>