css设置单行居中，多行居左/居右

在标题的设置上，不知道大家有没有碰到过这样的一个情况：在文本字数在一行的情况下，让其居中显示，而在文本字数达到多行的情况下，让其居左显示

其实当时在自己脑中显示就是利用js来控制（原谅我是个菜鸟）

经过公司同事的点拨，第一次使用了css来这样的布局

废话多了，直接上个代码吧。。

html中

<div>
    <p>标题内容</p>
</div>

css中

div {
    padding : 0 2vw;
    margin : 0 auto; // 使div框居中
    width : 80vw; 
    text-align : center; // 文本居中显示
}
p {
    width : auto;  // 必设
    display : inline-block; // 不能设置为block
    text-align : left; // 居左显示
}

这样就可以达到效果啦。。。

不需要每次都想着用js来解决问题了