CSS实现段落首行缩进

段落前面空两个字的距离,不要再使用空格了。应该使用首行缩进text-indent。

  text-indent可以使得容器内首行缩进一定单位。比如中文段落一般每段前空两个汉字。

  在这里我们需要了解一种长度单位em。em是相对长度单位。相对于当前对象内文本的字体尺寸。

  我们中文段落一般每段前空两个汉字。实际上,就是首行缩进了2em。

  看下面的例子:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>PHP资讯 - www.phpq.net</title>
<style type="text/css">
p{text-indent: 2em; /*em是相对单位,2em即现在一个字大小的两倍*/}
</style>
</head>
<body>
<p>段落前面空两个字的距离,不要再使用空格了。应该使用首行缩进text-indent。长度单位em。相对于当前对象内文本的字体尺寸。我们首行缩进了2em。2em即现在一个字大小的两倍。我在网页教学网学到了好多新的知识</p>
</body>
</html>

  顺带说下text-indent属性隐藏文字的问题

  链接用图片做背景,text-indent:-9999px; 隐藏文字,此效果在 IE 中是正常的,但在 Firefox 里,鼠标点击该链接时,虚线框却会包住被缩进的文字,结果显示为虚线框 N 长。

  因为平时是用overflow:hidden; 属性的,所以一直也没有注意到这个问题的存在,但当你需要使用 JS 来实现某种交互时,强烈建议不要使用 overflow:hidden; 属性,因为会给你带来很多意想不到的麻烦。

  虚线框,其实就是 CSS 中的 outline 属性,这也说明 IE 和 Firefox 对于 outline 和 border 的解析范围并不一致:IE 认为虚线框就是border的边缘,而 Firefox 则认为虚线框应该是文字范围

时间: 2024-09-26 19:26:20

CSS实现段落首行缩进的相关文章

CSS实现段落首行缩进两个字符不再使用空格

想让段落前面空两个字的距离不使用空格了,text-indent可以使得容器内首行缩进一定单位.比如中文段落一般每段前空两个汉字,感兴趣的朋友可以参考下,希望对大家有所帮助   段落前面空两个字的距离,不要再使用空格了.应该使用首行缩进text-indent.text-indent可以使得容器内首行缩进一定单位.比如中文段落一般每段前空两个汉字. 复制代码 代码如下: <style type="text/css"> p{ text-indent: 2em; /*em是相对单位

css控制段落首行缩进 text-indent

定义text-indent: 文本缩进缩进文字的第一行中的一个要素. 继承:是 注:负值是不允许的.第一行缩进将左边的价值,如果是否定的. JavaScript的语法 的CSS属性也可以动态改变一个JavaScript . 脚本语法: object.style.textIndent = " 50px " p {  text-indent: 20px } p {  text-indent: -12px  }  <html> <head> <style typ

Illustrator设置段落首行缩进2字符教程

给各位llustrator软件的使用者们来详细的解析分享一下设置段落首行缩进2字符的教程. 教程分享: 1.接着上节的例子,假使我们的文字内容已经复制到画布上的文本框里了   2.点击"段落面板",在对齐方式下面的就是左右缩进的设置选项   3.我们的左右缩进,更多的是针对于某一段的文字的设置,比如,我们选中中间一段文字,由于字号为21pt,所以我们要设置左缩进两个字符的话,就需要设置为42pt了,在左缩进那栏,把原来的0改成42   4.确定以后,我们可以得到左边缩进了两个字符的文字

使用Dreamweaver8实现文本首行缩进

      1.用输入法的全角来实现文本的首行缩进是最简单的方法.如果大家使用智能ABC,使用"shift+空格键",输入法的属性栏上的半月形就变成了圆形.在"代码"或者"设计"状态下按空格键两次,就实现了首行缩进两字符.还可以在记事本里面复制空格然后粘贴到Dreamweaver编辑的文本里面.使用全角插入空格的缺点是在英文字符集下,全角空格会变成乱码,影响网页美观.     2.用HTML语言也比较简单,在"代码"状态下,加

如何设置WPS首行缩进的度量单位

我们在用WPS2005编辑文档时,我们总是习惯于首行缩进2字符,使文档规范且美观,但有些时候(比如标题和正文字号不一致时,同样是2字符,但实际缩进量却会不一致),我们需要将首行缩进的度量单位转换成"毫米"或"厘米",会更方便操作.而在WPS2005的"段落"设置面板中却找不到变换度量单位的设置(如图1) 图1 那么,如何才能把系统默认的"字符"转换成"毫米"呢?其实,这只是金山公司的软件开发者跟我们玩了一个

word如何设置首行缩进?

  word如何设置首行缩进?            第一种方法 1.鼠标选中要编辑的段落文字,单击鼠标右键,在弹出的快捷菜单中,单击[段落]. 2.在弹出的对话框中,切换到[缩进和间距],将[缩进]一栏中的[特殊格式]设定为[首行缩进],[磅值]设为[2个字符],设置完毕后单击[确定]. 3.文档中每一段的第一行都空出了2个字符的距离.以后每分一段都会自动首行缩进2个字符. 第二种方法 1.切换到[视图]选项卡,单击[显示/隐藏]面板,在弹出的下拉菜单中,勾选[标尺]. 2.选中要编辑的段落,

Word2007文档怎么设置首行缩进

Word2007文档怎么设置首行缩进   1.选中文档中需要设置首行缩进的段落,然后在其上单击鼠标右键,选择"段落"选项. 2.此时会弹出"段落"对话框,我们在"缩进和间距"中将特殊格式设置为"首行缩进",并设置缩进值. 3.OK,首行缩进已经完成,效果如下.

Word2003首行缩进设置方法

Word2003首行缩进设置方法   1.选中文档中需要设置首行缩进的段落,然后单击"格式"菜单中的"段落"选项. 2.此时会弹出"段落"对话框,我们在"缩进和间距"中将特殊格式设置为"首行缩进",并设置缩进值. 3.OK,首行缩进已经完成,效果如下. word教程 Excel教程 PowerPoint教程

如何在wps文字中设置首行缩进

  在wps文字中设置首行缩进的方法: 首先,选中你所要缩进的对象 其次,点击开始下面的一个选项"行距",如下图 选择"行距"旁边的倒三角,下拉,选择"其他",这时会弹出有关"段落"的一个对话框,如下图 找到"特殊格式",如下图,下拉倒三角,会出现"首行缩进"等两个选项,这时候你点击"首行缩进",后面软件默认的是"2个字符",你可以根据自己的实际情