1. 基础悬垂缩进

适用场景：一般文本段落，首行需要与后续行视觉区分

.basic-hanging-indent {
    text-indent: -2em;
    padding-left: 2em;
    margin-bottom: 1em;
}

<p class="basic-hanging-indent">这是使用基本悬垂缩进效果的段落。首行会向左突出，后续行保持缩进。这种效果通常用于目录、参考文献和某些特殊的排版需求。</p>

效果示例：

这是使用基本悬垂缩进效果的段落。首行会向左突出，后续行保持缩进。这种效果通常用于目录、参考文献和某些特殊的排版需求中。我们可以看到，第一行与容器左侧对齐，而后续行则有明显的缩进效果，这种排版方式能够使段落的开始更加明确。

这是第二个使用基本悬垂缩进的段落。同样地，首行向左突出，后续行保持缩进。这种方式非常适合那些需要清晰段落划分的长文本，能够帮助读者更好地跟踪阅读进度。

2. 参考文献悬垂缩进

适用场景：学术论文参考文献列表、书籍引用

.reference-hanging {
    text-indent: -3em;
    padding-left: 3em;
    margin-bottom: 1em;
    font-size: 0.95em;
}

.reference-hanging .author {
    font-weight: bold;
}

.reference-hanging .year {
    color: #666;
    font-style: italic;
}

<div class="reference-hanging">
  <span class="author">张三, 李四</span> (<span class="year">2022</span>). 悬垂缩进在现代网页设计中的应用研究. 《网页设计学报》, 35(2), 112-128.
</div>

效果示例：

张三, 李四 (2022). 悬垂缩进在现代网页设计中的应用研究. 《网页设计学报》, 35(2), 112-128.

Wang, L., & Johnson, R. (2023). The impact of CSS hanging indentation on readability. Journal of Web Design, 42(3), 88-96. doi:10.1234/jwd.2023.42.3.88

Miller, S., Thompson, K., & Davis, J. (2021). Modern approaches to text formatting in digital environments. Digital Typography Review, 15(4), 201-215.

3. 词典条目悬垂缩进

适用场景：词典、术语表、名词解释

.dictionary-entry {
    text-indent: -4em;
    padding-left: 4em;
    margin-bottom: 1.2em;
}

.dictionary-entry .term {
    font-weight: bold;
    color: #2c3e50;
}

.dictionary-entry .phonetic {
    font-family: 'Arial Unicode MS', sans-serif;
    color: #666;
    margin: 0 0.5em;
}

<div class="dictionary-entry">
  <span class="term">悬垂缩进</span> <span class="phonetic">[xuán chuí suō jìn]</span> 名词. 一种排版格式，其首行保持左对齐或向左突出，而该段落的后续行缩进至比首行更靠右的位置。
</div>

效果示例：

悬垂缩进 [xuán chuí suō jìn] 名词. 一种排版格式，其首行保持左对齐或向左突出，而该段落的后续行缩进至比首行更靠右的位置。常用于参考文献、目录、词典等场合。

负缩进 [fù suō jìn] 名词. 使用负值的text-indent属性创建的效果，使文本首行向左移动，相对于正常位置偏移。通常与内边距或外边距结合使用以实现悬垂缩进效果。

4. 目录悬垂缩进

适用场景：书籍目录、文档索引

.toc-item {
    text-indent: -2em;
    padding-left: 2em;
    margin-bottom: 0.5em;
    position: relative;
    overflow: hidden;
}

.toc-item::after {
    content: "";
    position: absolute;
    bottom: 0.5em;
    left: 0;
    width: 100%;
    border-bottom: 1px dotted #ccc;
    z-index: -1;
}

.toc-item .page-number {
    float: right;
    padding-left: 0.3em;
    background-color: white;
}

.toc-item .title {
    float: left;
    padding-right: 0.3em;
    background-color: white;
}

<div class="toc-item">
  <span class="title">第一章 CSS基础知识</span>
  <span class="page-number">1</span>
</div>

效果示例：

第一章 CSS基础知识 .................................................. 1

第二章 文本属性与排版技巧 ...................................... 15

第三章 悬垂缩进的实现方法 .................................... 28

第四章 响应式设计中的文本处理 ............................. 42

第五章 高级排版技术与最佳实践 ............................. 56

5. 自定义列表悬垂缩进

适用场景：特色列表、功能特点描述、步骤说明

.custom-list {
    list-style-type: none;
    padding-left: 0;
    margin: 1em 0;
}

.custom-list li {
    text-indent: -1.5em;
    padding-left: 1.5em;
    margin-bottom: 0.7em;
}

.custom-list.checkmark li::before {
    content: "✓";
    display: inline-block;
    width: 1.2em;
    color: #27ae60;
}

.custom-list.arrow li::before {
    content: "→";
    display: inline-block;
    width: 1.2em;
    color: #3498db;
}

<ul class="custom-list checkmark">
  <li>使用悬垂缩进可以创建自定义列表样式，不需要依赖浏览器默认的列表样式。</li>
  <li>这种方式可以完全控制列表标记的样式、大小和颜色。</li>
</ul>

效果示例：

✓ 使用悬垂缩进可以创建自定义列表样式，不需要依赖浏览器默认的列表样式，更加灵活可控。
✓ 这种方式可以完全控制列表标记的样式、大小和颜色，还可以使用任何自定义字符作为标记。

→ 适合创建独特的列表样式，特别是在需要与整体设计风格统一时非常有用。
→ 可以轻松更改标记符号，适应不同的内容类型和语境需求。

★ 星形标记适合用于强调重点内容或特色功能。
★ 不同类型的标记可以用于表示不同级别或类别的内容。

6. 大型悬垂缩进

适用场景：需要强烈视觉突出的特殊内容

.large-hanging {
    text-indent: -4.5em;
    padding-left: 4.5em;
    font-size: 1.05em;
    line-height: 1.7;
    margin-bottom: 1em;
}

<p class="large-hanging">这是使用较大悬垂缩进值的段落，首行向左突出的距离更大，创造更强烈的视觉效果。</p>

效果示例：

这是使用较大悬垂缩进值的段落，首行向左突出的距离更大，创造更强烈的视觉效果。这种大悬垂效果适用于需要更明显视觉区分的情况，比如某些特殊的标题或需要突出的内容部分。增大悬垂值可以创造更强的视觉冲击力。

第二个使用大型悬垂缩进的段落。通过这种方式，读者可以更容易地识别段落的开始，特别是在扫描长文本时。这种格式也常用于某些特殊的出版物中，如法律文件或技术说明书。

7. 带首字下沉的悬垂缩进

适用场景：文章开头、章节首段、特殊强调段落

.drop-cap-hanging {
    text-indent: -2em;
    padding-left: 2em;
    margin-bottom: 1em;
}

.drop-cap-hanging::first-letter {
    float: left;
    font-size: 3em;
    line-height: 0.8;
    padding-right: 0.1em;
    color: #c0392b;
}

<p class="drop-cap-hanging">这个段落结合了首字下沉和悬垂缩进两种效果，首字母被放大并使用特殊颜色，同时整个段落采用悬垂缩进格式。</p>

效果示例：

这个段落结合了首字下沉和悬垂缩进两种效果，首字母被放大并使用特殊颜色，同时整个段落采用悬垂缩进格式。首字下沉是一种古老的排版技术，常见于书籍和杂志的开篇段落，能够增加设计的优雅感和专业性。

另一个使用相同效果的段落。这种组合效果特别适合用于文章或章节的开头，能够有效吸引读者的注意力，并提供清晰的阅读起点。在网页设计中，这种效果可以增加内容的视觉吸引力。

8. 带编号的悬垂缩进段落

适用场景：步骤说明、编号条款、流程描述

.numbered-paragraphs {
    counter-reset: paragraph-counter;
}

.numbered-paragraphs p {
    text-indent: -2.5em;
    padding-left: 2.5em;
    margin-bottom: 1em;
}

.numbered-paragraphs p::before {
    counter-increment: paragraph-counter;
    content: counter(paragraph-counter) ". ";
    font-weight: bold;
    color: #3498db;
}

<div class="numbered-paragraphs">
  <p>这是一个带自动编号的悬垂缩进段落。通过CSS计数器功能，我们可以为每个段落自动添加递增的编号。</p>
  <p>这是第二个带编号的段落。编号会自动递增，不需要手动添加。</p>
</div>

效果示例：

1. 这是一个带自动编号的悬垂缩进段落。通过CSS计数器功能，我们可以为每个段落自动添加递增的编号。这种技术特别适合于法律文件、合同条款或需要段落编号的其他文档类型。

2. 这是第二个带编号的段落。编号会自动递增，不需要手动添加。这种方法的优点是当添加或删除段落时，所有编号会自动调整，保持连续性。

3. 这是第三个带编号的段落。除了编号外，我们还可以自定义编号的样式、颜色和大小，使其适应整体设计风格。这种编号方式比手动添加更加灵活和一致。

9. 响应式悬垂缩进

适用场景：需要适应不同屏幕大小的内容

.responsive-hanging {
    text-indent: -2.5em;
    padding-left: 2.5em;
    margin-bottom: 1em;
}

@media (max-width: 768px) {
    .responsive-hanging {
        text-indent: -2em;
        padding-left: 2em;
    }
}

@media (max-width: 480px) {
    .responsive-hanging {
        text-indent: -1.5em;
        padding-left: 1.5em;
    }
}

<p class="responsive-hanging">这个段落使用响应式悬垂缩进，会根据屏幕宽度自动调整缩进值。在较小的屏幕上，缩进量会减少。</p>

效果示例：

这个段落使用响应式悬垂缩进，会根据屏幕宽度自动调整缩进值。在较小的屏幕上，缩进量会减少。这种技术非常适合响应式网页设计，可以确保在各种设备上都有良好的阅读体验。尝试调整浏览器窗口大小，观察缩进的变化。

第二个响应式悬垂缩进的段落。在移动设备上查看时，悬垂值会自动减小，以适应更窄的屏幕宽度。这种自适应方法可以在保持设计意图的同时优化移动设备上的空间利用。

10. 悬垂缩进带首行样式

适用场景：需要强调段落首行的内容

.first-line-hanging {
    text-indent: -2em;
    padding-left: 2em;
    margin-bottom: 1em;
}

.first-line-hanging::first-line {
    font-weight: bold;
    color: #2980b9;
    letter-spacing: 0.03em;
}

<p class="first-line-hanging">这个段落的首行具有特殊样式，包括粗体和特殊颜色，同时整个段落采用悬垂缩进格式。</p>

效果示例：

这个段落的首行具有特殊样式，包括粗体和特殊颜色，同时整个段落采用悬垂缩进格式。这种组合效果可以在不破坏文本连贯性的情况下突出重要信息，引导读者的阅读流程，非常适合用于需要强调开头部分的长文本。

另一个使用首行样式的悬垂缩进段落。通过对首行应用特殊样式，可以增强文本的层次感和可读性。这种技术在杂志排版和网页设计中很常见，能够有效引导读者的视线。

11. 带图标的悬垂缩进

适用场景：提示信息、警告文本、特殊说明

.icon-hanging {
    position: relative;
    padding-left: 2.5em;
    margin-bottom: 1em;
}

.icon-hanging::before {
    position: absolute;
    left: 0;
    top: 0.1em;
    content: "ℹ️";
    font-size: 1.2em;
}

.icon-hanging.warning::before {
    content: "⚠️";
}

.icon-hanging.error::before {
    content: "❌";
}

<p class="icon-hanging">这是一个带信息图标的提示文本，图标作为悬垂部分。</p>
<p class="icon-hanging warning">这是一个带警告图标的警告文本。</p>

效果示例：

ℹ️ 这是一个带信息图标的提示文本，图标作为悬垂部分。这种样式适合用于展示提示性信息，图标能够直观地传达内容性质，帮助用户快速识别信息类型。

⚠️ 这是一个带警告图标的警告文本。通过使用警告图标，可以强调内容的重要性和潜在风险，引起用户的注意。这种样式常用于用户指南、帮助文档或操作提示中。

❌ 这是一个带错误图标的错误提示。这种样式可以用于显示错误信息或不推荐的操作，清晰地向用户传达需要注意的问题。

12. 法律文档悬垂缩进

适用场景：法律条款、合同文本、规章制度

.legal-document {
    counter-reset: section;
}

.legal-section {
    position: relative;
    padding-left: 3em;
    margin-bottom: 1.5em;
}

.legal-section::before {
    counter-increment: section;
    content: "§" counter(section);
    position: absolute;
    left: 0;
    font-weight: bold;
    color: #34495e;
}

.legal-subsection {
    counter-reset: subsection;
    margin-left: 1em;
    margin-top: 0.5em;
}

.legal-subsection-item {
    position: relative;
    padding-left: 2.5em;
    margin-bottom: 0.8em;
}

.legal-subsection-item::before {
    counter-increment: subsection;
    content: "(" counter(subsection, lower-alpha) ")";
    position: absolute;
    left: 0;
    color: #34495e;
}

<div class="legal-document">
  <div class="legal-section">
    本合同由甲乙双方在平等自愿的基础上达成，具有法律约束力。
    <div class="legal-subsection">
      <div class="legal-subsection-item">甲方应当按时支付相关费用。</div>
      <div class="legal-subsection-item">乙方应当提供符合要求的服务。</div>
    </div>
  </div>
  <div class="legal-section">
    如有争议，双方应当友好协商解决。
  </div>
</div>

效果示例：

§1 本合同由甲乙双方在平等自愿的基础上达成，具有法律约束力。
(a) 甲方应当按时支付相关费用。
(b) 乙方应当提供符合要求的服务。

§2 如有争议，双方应当友好协商解决。
(a) 双方应首先通过协商方式解决争议。
(b) 协商不成的，可向有管辖权的人民法院提起诉讼。

§3 本合同自双方签字之日起生效。

13. 定义列表悬垂缩进

适用场景：术语解释、FAQ列表、配置项说明

.definition-list {
    margin: 1em 0;
}

.definition-item {
    margin-bottom: 1.2em;
}

.definition-term {
    font-weight: bold;
    color: #2c3e50;
    margin-left: -2em;
    display: inline-block;
    width: 2em;
    margin-right: 0;
    text-align: right;
}

.definition-description {
    display: inline;
}

<div class="definition-list">
  <div class="definition-item">
    <span class="definition-term">Q:</span>
    <span class="definition-description">什么是悬垂缩进？</span>
  </div>
  <div class="definition-item">
    <span class="definition-term">A:</span>
    <span class="definition-description">悬垂缩进是一种文本首行向左突出，后续行缩进的排版格式。</span>
  </div>
</div>

效果示例：

Q: 什么是悬垂缩进？
A: 悬垂缩进是一种文本首行向左突出，后续行缩进的排版格式。这种格式常用于目录、参考文献和某些特殊的排版需求，能够使段落的开始更加突出。

Q: 如何在CSS中实现悬垂缩进？
A: 在CSS中，可以通过组合使用负值的text-indent和相同值的padding-left来实现悬垂缩进效果。这种方法使首行向左偏移，而整个块内容向右偏移相同距离。

14. 带引号的悬垂缩进

适用场景：引言、名人名言、书评

.quote-hanging {
    position: relative;
    padding-left: 2em;
    margin-bottom: 1.5em;
    font-style: italic;
    color: #555;
}

.quote-hanging::before {
    content: """;
    position: absolute;
    left: -0.2em;
    top: -0.3em;
    font-size: 3em;
    color: #ccc;
    line-height: 0.5;
}

.quote-hanging::after {
    content: """;
    font-size: 2em;
    color: #ccc;
    line-height: 0;
    vertical-align: -0.2em;
    margin-left: 0.1em;
}

<p class="quote-hanging">设计是发现问题并解决它。悬垂缩进就是解决文本排版中段落识别的一种优雅方案。</p>

效果示例：

"设计是发现问题并解决它。悬垂缩进就是解决文本排版中段落识别的一种优雅方案。"

"创造力来自于对传统的尊重与突破。好的排版既讲究规则，又充满创新，是精确科学与艺术直觉的结合。"

-- 某设计大师

15. 带时间线的悬垂缩进

适用场景：时间轴、历史事件、项目进度

.timeline {
    position: relative;
    margin-left: 4em;
    padding-left: 2em;
    border-left: 2px solid #3498db;
}

.timeline-item {
    position: relative;
    margin-bottom: 2em;
}

.timeline-date {
    position: absolute;
    left: -4em;
    width: 3em;
    text-align: right;
    color: #3498db;
    font-weight: bold;
}

.timeline-item::before {
    content: "";
    position: absolute;
    left: -2.1em;
    top: 0.5em;
    width: 10px;
    height: 10px;
    background-color: #3498db;
    border-radius: 50%;
}

.timeline-content {
    padding-bottom: 0.5em;
}

<div class="timeline">
  <div class="timeline-item">
    <div class="timeline-date">2020</div>
    <div class="timeline-content">项目启动，完成初步规划。</div>
  </div>
  <div class="timeline-item">
    <div class="timeline-date">2021</div>
    <div class="timeline-content">完成核心功能开发，开始测试阶段。</div>
  </div>
</div>

效果示例：

2020 ● 项目启动，完成初步规划。团队组建并确定技术方案。
     |
2021 ● 完成核心功能开发，开始测试阶段。解决关键技术难题并优化性能。
     |
2022 ● 正式发布产品，获得市场良好反响。开始规划下一版本功能更新。
     |
2023 ● 完成产品2.0版本开发，用户数量增长300%。

16. 悬垂缩进带背景强调

适用场景：重要提示、警告信息、知识点总结

.background-hanging {
    position: relative;
    padding: 1em 1em 1em 3em;
    background-color: #f1f9ff;
    border-radius: 4px;
    margin-bottom: 1.5em;
    border-left: 4px solid #3498db;
}

.background-hanging::before {
    content: "!";
    position: absolute;
    left: 1em;
    top: 1em;
    width: 1.5em;
    height: 1.5em;
    background-color: #3498db;
    color: white;
    border-radius: 50%;
    text-align: center;
    line-height: 1.5;
    font-weight: bold;
}

<div class="background-hanging">
  请注意：悬垂缩进可以与背景、边框等样式结合使用，创造出更丰富的视觉效果。这种组合方式特别适合强调重要信息。
</div>

效果示例：

! 请注意：悬垂缩进可以与背景、边框等样式结合使用，创造出更丰富的视觉效果。这种组合方式特别适合强调重要信息，在用户指南、帮助文档或产品说明中非常有用。

! 提示：如果需要区分不同类型的信息，可以使用不同颜色的背景和边框。这样用户可以通过颜色快速识别信息的重要性和类型。

总结与应用建议

每种悬垂缩进样式都有其特定的应用场景和视觉效果。在实际应用中，应根据内容类型、目标受众和设计风格选择合适的缩进方式。

1. 内容适配：根据内容类型选择适当的悬垂缩进样式，如参考文献使用参考文献样式，法律文档使用法律文档样式。
2. 一致性：在同一文档中，对相同类型的内容应使用相同的悬垂缩进样式。
3. 响应式设计：在移动设备上考虑减小缩进值，确保良好的阅读体验。
4. 与整体设计协调：悬垂缩进的颜色、大小应与整体设计风格协调一致。
5. 避免过度使用：不同类型的悬垂缩进不宜在同一页面中过度混用，以免造成视觉混乱。

通过这些示例和技巧，你可以在各种网页和文档设计中灵活运用首行悬垂缩进技术，创造专业、美观的文本排版效果。