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

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

想要实现的效果为:

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

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

css 多行文字左对齐,纯CSS实现文字一行居中,多行左对齐的方法_第1张图片

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

你可能感兴趣的:(css,多行文字左对齐)