CSS 怎么实现悬挂缩进(不是首行缩进),求解~(^o^)~

html-css0150

CSS 怎么实现悬挂缩进(不是首行缩进),求解~(^o^)~,第1张

<style type="text/css">

.s{padding:2emtext-indent:-1em}

</style>

<p class="s">asdf sdf sdsfs sfsfsfs <br>adfs fd</p>

1、打开Notepad++,新建一个文件

2、输入图中内容:

3、保存为:css.html,当然你也可以使用其它的名字,但扩展名需要使用.htm或.html

4、选择文件的保存位置,点击保存按钮

5、然后添加一个标签,输入一段用来测试的文字。

6、使用浏览器打开查看显示样式,现在还没有缩进。

7、接下来添加样式,这里我们使用内联样式,给P标签添加样式: style="text-indent:2em"

8、再刷新刚刚打开的网页看效果,是不是缩进了两个字符啊!

这里我们是使用em这个单位来缩进了两个字符,你也可以使用px作为单位来缩进指定的像素。

使用CSS的text-indent属性可以定义文本段落中的首行字体缩进的效果。使用该属性只对元素中的段落产生影响。对于使用<br>标签产生的换行效果,并不起作用。

1、在CSS样式表中设置文本首行缩进的样式规则。代码如下:

div{

 text-indent:2em

 font-size:24px

 width:400px

}

div标签选择器使用text-indent属性将段落首行缩进2em,这是两个汉字字符的宽度。使用font-size属性将字体大小设置为24px,使用width属性将div元素的宽度设置为400px,都是为了使效果能够更好地显示。

2. 在HTML网页中添加要使用标签选择器的div元素内容。代码如下:

<body>

<div>

<p>这段内容是一个文本首行字体缩进的实例,注意文本中段落首行部分的显示效果。</p>

<p>这段内容是一个文本首行字体缩进的实例,注意文本中段落首行部分的显示效果。</p>

</div>

div标签选择器直接应用到了相关的HTML div元素中,不再需要另外进行设置了。

3. 在浏览器中浏览文本首行缩进的显示效果。如下图所示:

从上图中可以看出,只要在父元素中定义了文本的缩进属性,在各个子元素中将继续继承这个缩进属性值。