CSS实现首行缩进的方法

之前都是添加空格来实现每段的首行缩进效果,然而最近更改主题后,原先的首行缩进两字的效果显示不正常,昨日在网上翻了一下CSS实现同样功能的方法。

网上搜索一下CSS实现首字下沉(也即首字增大增粗)的文章非常多,我们只需稍微改变一下即可以实现首行缩进特效。

什么是首行缩进?我想使用过Word的人都应该知道首行缩进是什么东西,也就是中文中使用的每段第一行要空两格再书写的效果。 以下就是实现这一特效的代码:

p:first-letter {margin:0 0 0 30px;}

在CSS文件中定义此段代码之后就可以实现每段首字自动缩进30像素的特效,也就是中文中出现的首字缩进两格的特效了。

更新:

以上的方法其实不是最理想的,而且不同的字体缩进宽度不同,其实CSS属性里面有这样的中文样式控制方法,以下就是

p {text-indent:2em;}

这就是缩进两个字符了,而且不会随字体的大小变化而导致不同的显示结果。

Posted in Web Tagged

Leave a Reply

Your email address will not be published. Required fields are marked *