首页 > web前端 > css教程 > 正文

css文字缩进text-indent使用方法

P粉602998670
发布: 2025-10-28 12:38:01
原创
672人浏览过
text-indent用于设置文本首行缩进,常用2em实现中文段落首行空两字符,支持px、em、%等单位,推荐em适配性好;可设负值配合padding实现悬挂缩进;仅对块级元素有效,不影响内联元素。

css文字缩进text-indent使用方法

在CSS中,text-indent 属性用于设置文本第一行的缩进。常用于段落首行空出两个字符位置,符合中文排版习惯。

基本语法

text-indent: length | % | inherit;

  • length:使用 px、em、rem 等单位设置固定缩进,如 2em
  • %:相对于父元素宽度的百分比缩进
  • inherit:继承父元素的 text-indent 值

常用使用方式

最常见的是为段落设置首行缩进2个中文字符:

p {
  text-indent: 2em;
}

em 单位推荐用于 text-indent,因为 1em 约等于一个中文字符宽度,2em 就是两个汉字的缩进,适配性好。

立即学习前端免费学习笔记(深入)”;

法语写作助手
法语写作助手

法语助手旗下的AI智能写作平台,支持语法、拼写自动纠错,一键改写、润色你的法语作文。

法语写作助手31
查看详情 法语写作助手

负缩进与特殊用途

text-indent 也支持负值,可用于实现“悬挂缩进”效果:

hanging-paragraph {
  text-indent: -2em;
  padding-left: 2em;
}

这种技巧常用于列表项或引用内容,让第一行突出显示。

注意事项

  • 只影响块级元素的第一行文本,对内联元素无效
  • 如果元素没有换行,缩进可能不可见
  • 结合 direction 和 writing-mode 使用时,行为会随文本方向变化
  • 不要在 inline 元素上使用,应作用于 p、div、h1-h6 等 block 元素
基本上就这些,text-indent 简单实用,特别适合中文段落排版。

以上就是css文字缩进text-indent使用方法的详细内容,更多请关注php中文网其它相关文章!

相关标签:
最佳 Windows 性能的顶级免费优化软件
最佳 Windows 性能的顶级免费优化软件

每个人都需要一台速度更快、更稳定的 PC。随着时间的推移,垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是,许多工具可以让 Windows 保持平稳运行。

下载
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
开源免费商场系统广告
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号