text-indent实现文本缩进布局

来源:互联网 发布:f盘不可以安装sql吗 编辑:程序博客网 时间:2024/03/29 18:33

      今天的总结很简单,但对于初学者来说,特别是对于我这个初入前端门槛的开发者来说,就不是那么地简单了(这里指不容易想到)。

      好了,废话不多说,今天的总结就是一个对文本缩进的简单应用。如何做到标题与内容的分离呢?如下图:


      就是做这么一个简单的标题与内容的分离,看似简单,但对于我这个初生牛犊确实难以想到(text-indent可以有负值来设置)。这不,想了很长时间才想了出来。

      你只需编写以下文档及写以下样式就可以轻松搞定。

HTML文档:

<p class="text_layout_test">header:这是一个关于文本布局的测试,这是一个关于文本布局的测试,这是一个关于文本布局的测试,这是一个关于文本布局的测试,这是一个关于文本布局的测试,这是一个关于文本布局的测试,这是一个关于文本布局的测试,这是一个关于文本布局的测试,这是一个关于文本布局的测试,这是一个关于文本布局的测试,这是一个关于文本布局的测试,这是一个关于文本布局的测试,这是一个关于文本布局的测试,这是一个关于文本布局的测试。</p>

 style样式:

html,body,object,iframe,div,span,p,h1,h2,h3,h4,h5,h6,ul,ol,li,dd,dt,dl,img{margin: 0;padding:0;}.text_layout_test{padding:5px 10px 5px 60px;text-indent: -3.5em;}

      好了,首先要给这段文档设置一个padding,这是在设置text-indent之前的一些设置。是为了防止在设置text-indent为负值时,导致文本隐藏,设置padding后就可以有效避免。随后,给文本设置一个text-indent:-3.5em;就可以了。

0 0
原创粉丝点击