CSS实现段落首行缩进的代码
发布时间：2013-06-11 01:12:37作者：知识屋
段落前面空两个字的距离，不要再使用空格了。应该使用首行缩进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 则认为虚线框应该是文字范围。
（免责声明：文章内容如涉及作品内容、版权和其它问题，请及时与我们联系，我们将在第一时间删除内容，文章内容仅供参考）
知识阅读
软件推荐
更多 >
-
1
英文强制换行css 使用css强制英文单词断行代码2013-02-18
-
2
CSS中marker-offset的使用方法
-
3
IE6-8 filter双重滤镜bug的相关详解！
-
4
css3中如何让多余的字符串消失并附加省略号的方法
-
5
CSS实现段落首行缩进的代码
-
6
CSS中使用expression完美设置页面最小宽度(兼容ie)
-
7
[前端笔记] border:none;与border:0;的区别
-
8
用css实现透视效果
-
9
css教程之绝对定位使用详解
-
10
CSS实现背景图片不规则的导航菜单
