芒果小站

  1. 全球最具业界良心的主机 - DigitalOcean

    毫无疑问,目前做得最好的主机供应商

    猛击这里查看

  2. 芒果小站目前使用的主机 - DigitalOcean

    客服响应快,随时退款,XEN 架构稳定

    猛击这里查看

  3. 最好的日本东京线路主机 - DigitalOcean

    可选弗里蒙特、达拉斯、亚特兰大、纽瓦克、伦敦、东京机房

    猛击这里查看

  • 1
  • 2
  • 3
切换到精简模式
2

用 CSS 实现段落首行缩进

css
作者 芒果/分类 代码/发布于 2009-05-21 22:08

芒果介绍过有利于 SEO 的背景 Logo 代码,其中谈到了用 CSS 的 text-indent 属性来隐藏文字的方法。顾名思义,text-indent 属性即为文本缩进,利用它能方便实现段落的首行缩进。

中文段落每段开始需要空两格,使用 text-indent 则只需定义 2em 的缩进值即可。此处的 em 指的是页面文字的大小,即对应 CSS 中的 font-size 属性。比如文字的大小为 12px,那么 2em 即等于 12px 的两倍,为 24px。

举例说明,先给出一段文本:

<p id="indent">文本缩进</p>

为样式 indent 定义属性:

#indent{text-indent:2em;}

这样每个段落无需输入空格,即可实现首行缩进效果。

版权所有,转载请注明出处。
转载自 <a href="http://mangguo.org/use-css-realize-paragraph-first-line-indent/" title="用 CSS 实现段落首行缩进" rel="bookmark">用 CSS 实现段落首行缩进 | 芒果小站</a>
如果喜欢这篇文章,欢迎订阅芒果小站以获得最新内容。

已经有 2 条群众意见

  1. ?
    怎么样博客文章开始缩进两个字。 - WordPress - 开发者 /2013-06-08 04:27

    […] 为<p>增加一个text-indent:2em的样式,再看看效果 回复: text-indent:2em http://mangguo.org/use-css-r … -first-line-indent/ 回复: 楼上的有用 但不够具体… 回复: CSS中加入 .entry p {text-indent:2em;} […] 回应

    #1
  2. sn /2013-11-17 10:33

    具体怎么操作啊 新手不太懂 回应

    #2

下面我简单说几句