html中如何实现段落首行悬挂

答案:1 悬赏:10 手机版

解决时间 2021-11-11 09:32

提问者网友：戎马万世
2021-11-11 00:46

html中如何实现段落首行悬挂

最佳答案

五星知识达人网友：笑迎怀羞
2021-11-11 02:01

一般我们需要对文章段落进行首行缩进的时候，都是使劲的按空格键。现在学会了HTML和CSS后，想要在段落前面空两个字的距离，可不要再不停按空格键了，可以用CSS来实现段落首缩进两个字符的效果。这里我们需要使用首行缩进CSS text-indent 属性。text-indent可以使得容器内首行缩进一定单位。比如中文段落一般每段前空两个汉字的距离。在这里我们需要了解一种长度单位em。em是相对长度单。相对于当前对象内文本的字体尺寸。我们中文段落一般每段前空两个汉字。实际上，就是首行缩进了2em。代码如下：
W3Cschool在线教程（w3cschool.cn）- 学技术，从W3Cschool开始！W3Cschool主要为初学者技术的人员提供在线学习教程和日常技术资料查询服务。为了能更好的服务用户，网站平台中提供了大量的在线实例，通过实例，可以更好地学习如何建站。平台的内容全部看免费查看，并且会根据当前互联网的变化实时更新内容。
显示效果如下：

用CSS实现段落首缩进两个字符，实现首行缩进的通用方法是加四个小角空格。其实呢，用CSS样式来定义更为高效。比如在style里定义如下缩进样式：
.suojin{text-indent:2em}在需要缩进的地方使用
class="suojin"即可，比如用一个div定义一整块段落首先缩进，凡在div区域里，浏览器一碰上p语句（即一个新段的开始），就会执行.suojin所定义的缩进。也可以在正文中使用嵌入式CSS样式来定义，下面举个实例：

段落一
段落二
段落三

效果如下：

两种方法各有长处短处,可根据需要决定使用哪一种方法。
text-indent:2em;解释：text的意思是文本、indent在计算机英语中意思是缩进、至于后面的2em意思就是2个相对单位； em解释：相对于当前对象内文本的字体尺寸。（引自CSS参考手册）各位同学，要仔细品一下这个概念！理解了吧，em这个单位的意思就是相对文字大小，1em就是1个文字大小，2em就是两个文字大小，到这里看明白了吧，理解“text-indent:2em; ”的意思了吧，就是“文本缩进两个文字大小”，这不就是我们要的效果么？
注：div标签不要忘记起始符。text-indent 只对p标签或 div标签有效，对br标签不生效，原因是br标签是换行标签不是分段标签。

我要举报

如以上问答信息为低俗、色情、不良、暴力、侵权、涉及违法等信息，可以点下面链接进行举报！