Css实现单行文字水平居中多行文字左对齐

单行文字水平居中多行文字左对齐

开发中经常遇到文案显示有这样的需求：单行文字水平居中多行文字左对齐。其实这个效果实现很简单，两行css代码就可以搞定啦。

效果如下：使得p元素中的文案单行文字水平居中多行文字左对齐的效果。

html文件：

<div class="wrap"><p class="content">这是测试文案这是测试文案这是测试文案这是测试文案这是测试文案这是测试文案这是测试文案这是测试文案这是测试文案这是测试文案这是测试文案这是测试文案这是测试文案这是测试文案这是测试文案这是测试文案这是测试文案这是测试文案这是测试文案这是测试文案这</p>
</div>

css文件添加以下两行样式就OK啦。

    .wrap {text-align: center;}.content {display:inline-block;text-align: left;}