css 多行文字左对齐,纯CSS实现文字一行居中，多行左对齐的方法

其实这种需求还是蛮常见的，主要用于产品列表页面，用于产品图片下面，显示产品的名称。

想要实现的效果为：

未知文字长度，当文字长度小于盒子宽度，也就是一行时，文字居中。

当文字长度大于盒子的宽度，会自动换行，成为多行文字，此时文字左对齐。

1、利用行内元素：

我首先想到了这个思路，思路如下：

让P居中，P中的文字左对齐：(P的父级text-align:center;  P自身text-align:left;)

P的宽度根据文字的宽度伸缩，当文字为一行时，则P的宽度小于LI的宽度，居中；则看上去文字是局中的。

当大于一行时，P的宽度和LI的宽度是一致的，文字就居左了。

文字测试

*{margin: ;padding: ;list-style: none;font-weight: normal;font-style: normal;}

body {font-size:16px;font-family:tahoma,Helvetica, Arial,"\5FAE\8F6F\96C5\9ED1";line-height: 1.5;}

ul {width: 500px; margin: 100px auto; overflow: hidden;}

/*代码开始*/

l