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

text-indent用于设置文本首行缩进，常用2em实现中文段落首行空两字符，支持px、em、%等单位，推荐em适配性好；可设负值配合padding实现悬挂缩进；仅对块级元素有效，不影响内联元素。

在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 就是两个汉字的缩进，适配性好。

网钛淘拍CMS(TaoPaiCMS) V1.60

2013年07月06日 V1.60 升级包更新方式：admin文件夹改成你后台目录名，然后补丁包里的所有文件覆盖进去。1.[新增]后台引导页加入非IE浏览器提示，后台部分功能在非IE浏览器下可能没法使用2.[改进]淘客商品管理 首页 列表页 内容页 的下拉项加入颜色来区别不同项3.[改进]后台新增/修改淘客商品，增加淘宝字样的图标和天猫字样图标改成天猫logo图标4.[改进]为统一名称，“分类”改

0 查看详情

负缩进与特殊用途

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

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

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

注意事项

• 只影响块级元素的第一行文本，对内联元素无效
• 如果元素没有换行，缩进可能不可见
• 结合 direction 和 writing-mode 使用时，行为会随文本方向变化
• 不要在 inline 元素上使用，应作用于 p、div、h1-h6 等 block 元素

基本上就这些，text-indent 简单实用，特别适合中文段落排版。

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