Jimdo博客实现段落缩进两个字的CSS代码

在汉语里,对书面文字的书写是有一定要求和规范的,比如,每一个段落的首行,必须缩进两个汉字。但是,在网络上,这种情况越来越受到西方的影响,我们可以看到很多网站已经不注意这个问题了。当然,绝大多数人还是注意这个问题的。以Jimdo这个在线平台来说,我们在写博客时,在段落的首行,很多朋友还是乐意敲上几个空格的。

那么,是否有方法实现段落首行文字的自动缩进呢?回答是肯定。在CSS里,有关段落缩进的语法如下:

语法: text-indent: <值>
允许值: <长度> | <百分比>
初始值: 0

文本缩进属性可以应用于块级元素(P,H1,等),以定义该元素第一行可以接受的缩进的数量。该值必须是一个长度或一个百分比。常用的文本缩进用法主要用于段落的缩进,比如:

p{text-indent:2em}

我们只要在CSS里作以上设置,则整个网站的<p>标签,首行都会自动缩进两个字符(两个汉字),这就是CSS设置的好处。不过,对于Jimdo而言,如果简单地做以上设置,Jimdo博文中,段落固然实现了首行的自然缩进,同时也会带来一些问题,因为<p>标签不仅仅用于Jimdo博客的文本元素,别的地方也会用到<p>标签,比如博客的日期等。

通过研究,发现Jimdo博客的文本元素,都是嵌套在类名“j-text”中的,即:

<div class="n j-text">

      <p>文本内容</p>

</div>

这样一来,问题就比较好解决了,我们只要在CSS里做以下设置,那么就能实现Jimdo博客中文本元素段落首行的自动缩进:

.j-text p{text-indent: 2em;}

对于自定义模板,在自定义的CSS里添加上以上代码即可;对于系统模板,可以在“head”里添加以下代码:

<style>
.j-text p{text-indent:2em}
</style>

本文所述的方法,已测试通过,本文的各个段落首行就没有敲空格(我的设置仅对本页面有效),而是自动缩进的。不过,有几个问题需要说明一下:

一、这个方法只适用于新站,或博文不是太多的网站使用。如果已写了相当数量的博客,再回去把那些空格去掉,会累趴下的。

二、这个自动缩进的CSS代码,在“编辑”状态下是看不到效果的,必须在“预览”状态下才起作用,也就是说,对于Jimdo博客,必须是保存以后才能看到效果。

Write a comment

Comments: 7
  • #1

    网型网秀 (Friday, 23 March 2012 09:54)

    之前我也想过,但是想到文章比较多,所以一直都是是用的两个全角空格。
    正像邻居说的那样,博客多了改起来很麻烦。但还有一点邻居注意到没有,由于class=
    "n j-text"在Jimdo里使用的地方很多,一但使用了这段代码,有时内容你想对齐到左边就麻烦了。

  • #2

    网上邻居 (Friday, 23 March 2012 12:45)

    网型网秀:
    你我的站都用不上这个代码了,作为演示,本页面还是应用了这个设置,看起来和预想的效果完全一样。
    关于class="n j-text",Jimdo里虽然使用很多,但它都是文本元素,而且和<p>标签是配套使用的,经过简单测试,采用本文的代码,不会对别的<p>标签产生什么影响。
    此外,如果万一某段文本需要对齐到左边,也就是首行不自动缩进,可以直接去掉它的“文本元素”属性。当然,如果多了,操作起来会麻烦的。

  • #3

    晨曦骄阳 (Wednesday, 27 June 2012 22:44)

    你们两个都是jimdo精英啊 呵呵

  • #4

    gaaradex (Saturday, 30 June 2012 12:06)

    网上邻居:
    请问怎样“去掉它的“文本元素”属性”?

  • #5

    网上邻居 (Saturday, 30 June 2012 18:01)

    gaaradex:
    去掉“文本元素”属性的方法是:在文本编辑器工具栏上点击“HTML”,全部复制内容,再添加“Widget/HTML”,将刚才的内容粘贴进去并保存即可,当然,要把原文本删除掉。

  • #6

    Centrifugal Juicer (Wednesday, 17 April 2013 04:17)

    I shared this upon Twitter! My friends will really enjoy it!

  • #7

    Louis Vuitton iPhone 6 Plus Wallet Cases (Wednesday, 06 April 2016 16:41)

    Both the iPhone 6S Plus and the S7 Edge have optical image stabilization (OIS), but Samsung's felt much stronger all throughout our tests, and it's part of the reason why the S7 Edge took the better photo here.