Callout 段首缩进功能
为现有的Callout添加中文段首缩进效果，不改变原有样式。
使用方法
基本用法
只需要在现有的Callout外面包装一个带有缩进类的div：
<div class="text-indent-2">
> 这是第一段内容，会有两个字符的首行缩进效果。这样的排版更符合中文阅读习惯，让内容看起来更加整齐美观。
>
> 这是第二段内容，同样会有首行缩进。每个段落的第一行都会自动缩进两个字符的距离，营造出传统书籍的阅读体验。
</div>如果标识文字也被缩进了
如果"Info"、“Warning"等标识文字也被缩进了，可以手动添加callout-title类：
<div class="text-indent-2">
> <p class="callout-title">Info</p>
> 这是第一段内容，会有两个字符的首行缩进效果。
>
> 这是第二段内容，同样会有首行缩进。
</div>可用的缩进类
text-indent-1- 1字符缩进text-indent-2- 2字符缩进（推荐）callout-title- 强制不缩进（用于标识文字）
效果演示
测试：普通段落缩进
这是一个普通段落，用来测试缩进功能是否工作。如果你看到这个段落的首行有缩进，说明CSS已经生效。
这是第二个段落，同样应该有首行缩进效果。
标准缩进（2字符）- 标题不缩进
Info
这是一个带有段首缩进的信息提示框。注意"Info"标题不会缩进，只有内容段落会缩进。每个段落的首行都会自动缩进两个字符，这样的排版方式在中文阅读中非常常见，能够让读者更容易区分不同的段落。
这是第二个段落，同样具有首行缩进效果。无论段落有多长，只有第一行会缩进，后续的换行内容会正常对齐到左边距。
第三个段落继续保持这种优雅的缩进效果。这种设计让整个 Callout 内容看起来更加专业和美观。
对比：标题缩进 vs 内容缩进
Warning
重要说明：现在只有内容段落会缩进，“Warning"标题和这个粗体标题都不会缩进。
这是第一个内容段落，应该有缩进效果。
这是第二个内容段落，同样应该有缩进效果。
警告信息缩进
Warning
这是一个警告信息的段首缩进演示。即使在警告类型的 Callout 中，段首缩进功能依然能够正常工作，保持内容的可读性。
请注意，段首缩进不会影响 Callout 的其他功能，比如图标显示、颜色主题等都会正常工作。
错误信息缩进
Danger
这是错误信息的段首缩进演示。在处理重要的错误提示时，良好的排版能够帮助用户更好地理解和处理问题。
段首缩进让每个段落的开始更加明显，特别是在包含多个段落的长文本中，这种效果尤为重要。
不同缩进大小
1字符缩进
Tip
这是使用 text-indent-1 类的演示，缩进距离为1个字符。适合需要较小缩进的场景。
较小的缩进在某些设计风格中可能更加合适，特别是在移动端或者空间有限的情况下。
与列表的配合
Info
段首缩进功能与列表元素完美配合：
- 这是第一个列表项，其中的段落内容也会有首行缩进效果。
- 这是第二个列表项，展示了在列表环境中段首缩进的表现。
- 第三个列表项继续保持一致的缩进效果。
列表后面的段落会继续保持段首缩进，确保整体排版的一致性和美观性。
与其他元素的配合
Tip
段首缩进功能可以与其他 Markdown 元素很好地配合使用：
粗体文本：这个段落包含粗体文本，段首缩进依然正常工作。
斜体文本：这个段落包含斜体文本，缩进效果不受影响。
代码文本：这个段落包含内联代码，段首缩进功能保持正常。
链接文本：这个段落包含链接，所有功能都能正常协作。
无缩进对比
为了对比效果，这里是一个没有使用段首缩进的普通 Callout：
Note
这是没有段首缩进的普通 Callout。可以看到段落的开始没有缩进，这是默认的显示效果。
第二个段落同样没有缩进。通过对比可以明显看出段首缩进对阅读体验的改善效果。
响应式设计
段首缩进功能具有响应式设计：
- 桌面端：使用完整的缩进距离
- 移动端：自动减少缩进距离，确保在小屏幕上的可读性
使用建议
- 中文内容：强烈推荐使用段首缩进，符合中文阅读习惯
- 长文本：在包含多个段落的 Callout 中使用，提高可读性
- 正式文档：在需要专业排版效果的文档中使用
- 缩进大小：
- 一般情况使用
text-indent-2（2字符） - 移动端优先使用
text-indent-1（1字符） - 正式文档可使用
text-indent-3或text-indent-4
- 一般情况使用
快速使用
<div class="text-indent-2">
> [!INFO]
> 你的内容在这里，每个段落都会有首行缩进效果。
>
> 这是第二个段落，同样会有缩进。
</div>技术实现
这个功能通过CSS的 text-indent 属性实现，具有以下特点：
- 高兼容性：支持所有现代浏览器
- 不影响布局：只影响首行，不改变整体布局
- 响应式：在移动端自动调整缩进大小
- 完美兼容：不改变原有Callout样式，只是添加缩进功能
- 通用性强：可以应用到任何内容上，不仅限于Callout
通过这种方式，你可以在保持原有Callout样式的基础上，轻松添加专业的段首缩进效果！