css自动换行缩进

好久没写关于介绍css文章了，今天处理页面页面的时候正好碰到了一个知识点，就顺便来一发。


css自动换行缩进，应用场景一般是对于列表信息遇到的比多。比如，我要实现一个我网站的简介列表，如下的代码。


```javascript
<div style="width: 290px;">
<ul style="list-style: none;">
<li>网站：求索网</li>
<li>站长：chenxing</li>
<li>域名：www.qiusuoweb.com</li>
<li>主旨：专注WEB开发，分享经验，沉淀知识，求索新技术</li>
<li>技术交流群：157451741</li>
</ul>
</div>
```
页面效果：




上面的主旨那一项换行了顶到前面，影响阅读和美观。我希望缩到“：”后面，使一眼看上去属于主旨那一项。代码处理如下：


```javascript
<div style="width: 290px;">
<ul style="list-style: none;">
<li>网站：求索网</li>
<li>站长：chenxing</li>
<li>域名：www.qiusuoweb.com</li>
<li style="text-indent: -3em;margin-left: 3em;">
   主旨：专注WEB开发，分享经验，沉淀知识，求索新技术
</li>
<li>技术交流群：157451741</li>
</ul>
</div>
```
页面效果图：




ok，实现想要的结果。总结，处理自动换行缩进代码。


```css
/*首行先缩进一个负值，然后再margin-left正直*/
li {
    text-indent:-3em;
    margin-left:3em;
}
/*值视情况而定，一般这两个值相等，对于例子为3em，是由于首行开始位置和其他行的开始位置距离3个字符长度*/

```

文章转载自求索网：http://www.qiusuoweb.com/62.html