分享怎样用CSS控制文本左右对齐且首行缩进的方法

---

前段时间在做公司的一个英语的Web项目，遇到了个小问题，问题描述如下：网页上有一个层(div)，层里面的内容后台是可以修改的，有点类似于网站的公告或者通知的形式。这里的内容是由客服MM修改的，她们习惯性的直接从word文档里面复制过去，这样复制过去问题就来了，由于后台是使用的FCK编辑器，直接复制过去那个编辑器就会添加很多样式，前台界面这下可就乱套了，乱七八糟的。用Firefox选中后台添加的公告内容查看其源代码，居然还有中文的：font-family:"@宋体"这种代码，这样子对于我们的网站是绝对不允许的，而且这段文本的格式也不是很好控制，搞得这个层里面的文字内容左右都对不齐。后来把多余的样式删除掉了，但文本内容在这个层里面的左右还是对不齐，没有办法，求助于公司的美工，美工帮我调了下样式，但还是没有完美的解决文本在这个层里面左右对齐并且首行缩进，因为调了样式之后在IE下OK了，但firefox下文本内容还是没有左右对齐并首行缩进。这样也不行，因为我们不以IE为标准，以Firefox为标准，且是面向国外客户的站点。这个问题我就暂时先放了一阵子，赶快把网站上线再说，一点小问题就没有去管它了。

　　关于这个小问题呢，我也想到了<<精通CSS与HTML设计模式>>这本书的第11章介绍的分割这一节的文章有介绍，但这本书我也没有放在公司，也就不管它了；今天翻起这本书也正好看到了，特把原来没有解决的问题给解决掉了。

　　先看效果图吧:

　　其源代码就比较干净了,源码如下:

<p　class="elegant">Our　online　order　form　allows　you　to　order　directly　in　the　internet,　saving　your　time　and　offering　you　convenience.　Here’s　how　you　do　it.</p>
<p　class="elegant">When　you　want　to　buy　our　commodities,　please　register　first.　After　you　create　your　account　successfully,　you　can　directly　order　our　products　and　pay　for　them.　Next　time　you　just　click　“log　in”,　you　can　enter　your　account,　then　shopping　simply　and　conveniently.</p>

　　最重要的就是CSS了,代码如下:

<style　type="text/css">
　　　　　　　　*.elegant
　　　　　　　　{
　　　　　　　　　　　　margin-left:　40px;
　　　　　　　　　　　　margin-right:　80px;
　　　　　　　　　　　　letter-spacing:　1px;
　　　　　　　　　　　　word-spacing:　2px;
　　　　　　　　　　　　line-height:　1.7em;
　　　　　　　　　　　　text-indent:　40px;
　　　　　　　　　　　　text-align:　justify;
　　　　　　　　}
</style>

　　上面简单的CSS样式就实现了文本的左右对齐,并且段落的首行是缩进的.

---

« 
» 

---