您的位置:首页 > DIV CSS实例 > 【 返回上一页

p不用空格字符缩进文字内容 css缩进样式实例

p不用空格字符缩进 使用css缩进样式缩进图文实例篇

html p段落文章排版中,每段p段落文字内容自动缩进两个中文字位置,如何使用实现呢?不用html空格占位缩进,使用css样式来缩进。

div css样式中,缩进对应CSS样式单词text-indent

简单对p设置首行文字缩进:

  1. p{text-indent:25px} 

对我网页中p设置文字缩进25px

CSS缩进实现p不用html空格字符缩进内容实例:

这里对指定div盒子内p设置缩进,避免网页中其它地方使用p文字缩进。

1、p内容自动缩进完整HTML+CSS实例代码

  1. <!DOCTYPE html> 
  2. <html> 
  3. <head> 
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
  5. <title>p内容缩进 在线演示 ThinkCSS</title> 
  6. <style> 
  7. .exp{ width:400px; border:1px solid #F00} 
  8. .exp p{text-indent:35px} 
  9. </style> 
  10. </head> 
  11. <body> 
  12. <div class="exp"> 
  13. <p>CSS通常又称为“风格样式表(Style Sheet)”,它是用来进行网页风格设计的。
    比如,如果想让链接字未点击时是蓝色的,当鼠标移上去后字变成红色的且有下划线,这就是一种风格。
    </p> 
  14. <p>通过设立样式表,可以统一地控制HTML中各标志的显示属性。级联样式表可以使人更能有
    效地控制网页外观。
    </p> 
  15. <p>使用级联样式表,可以扩充精确指定网页元素位置,外观以及创建特殊效果的能力。</p> 
  16. </div> 
  17. </body> 
  18. </html> 

实例代码介绍:
为了便于填入少量文字就能看到p段落文字缩进效果,对div class=exp设置css宽度css边框。.exp p{text-indent:35px}对class=exp内p指定设置缩进35px

2、css html p段落每个p首行文字缩进实例效果截图

html p段落文字缩进css div布局实例效果截图
html p段落文字缩进css div布局实例效果截图

3、段落p内容缩进实例在线演示与案例文件打包下载
在线演示:

查看案例

打包下载:

小结:p设置文段首行不用空格字符实现缩进,使用css text-indent实现,根据需求可以设置需要缩进宽度。

相关标签: 缩进 p 空格
如需转载,请注明文章出处和来源网址:http://www.thinkcss.com/shili/1069.shtml

日期:2016-09-08 10:22:31 来源:www.thinkcss.com 作者:div css

热门点击