使用text-indent属性可实现段落首行缩进，支持固定长度、百分比和em单位，适配不同排版需求，结合方向与书写模式调整缩进位置。
如果您希望在网页文本中实现段落的首行缩进效果，可以通过CSS的text-indent属性来控制文本块中第一行的缩进距离。该属性常用于模拟中文排版中常见的“段首空两格”样式。
本文运行环境：MacBook Pro，macOS Sonoma
text-indent属性允许通过具体的长度值来定义首行的缩进量，适用于需要精确控制排版的场景。
1、在CSS选择器中添加text-indent属性，并赋予一个绝对或相对长度值，例如2em或30px。
立即学习“前端免费学习笔记（深入）”；
2、将该样式应用到需要缩进的段落标签（如p、div等）上。
3、浏览器会自动对所选元素的第一行文本进行水平位移，后续行不受影响。
当希望缩进距离随容器宽度变化时，可以采用百分比作为单位，实现更灵活的布局适配。
1、设定text-indent值为一个百分比，例如2%或5%。
2、确保父容器具有明确的宽度定义，否则百分比计算可能失效。
3、此时首行缩进将基于包含块的宽度进行计算，适合在不同屏幕尺寸下保持协调的视觉效果。
使用em作为单位可以让缩进大小与当前字体大小相关联，从而在字体变化时仍保持合适的缩进比例。
1、设置text-indent为2em，表示缩进两个当前字体的字符宽度。
2、此方法特别适用于中文段落，因为通常“首行空两格”即指两个汉字宽度。
3、即使页面字体动态调整，缩进仍能保持自然对齐，提升可读性和排版美观性。
在使用CSS的writing-mode或direction改变文本流向时，text-indent的行为也会随之改变。
1、若文本方向为从右至左（如设置direction: rtl），则缩进出现在右侧。
2、对于竖排文本（writing-mode: vertical-rl），缩进将作用于块的起始边缘，可能是顶部或底部。
3、需注意检查实际渲染效果，确保缩进方向符合预期布局需求。
以上就是css首行缩进text-indent的实现的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
897
收藏
