【CSS世界】通过CSS，实现文字一行居中，多行左对齐效果

效果

代码

HTML：
<div class="box">
  <p id="conMore" class="content">文字内容-新增文字-新增文字-新增文字</p>
</div>
<!-- 按钮 -->
<p><button id="btnMore">更多文字</button></p>

CSS：
.box {
  padding: 10px;
  background-color: #cd0000;
  text-align: center;
}
.content {
  display: inline-block;
  text-align: left;
}

原因

1.当一行的时候，p的宽度没有大于等于div的宽度，p里面的内容是居左的，但是，p在div里面是居中的
2.当多行的时候，因为p里面的text-align：left，所以文字居左，第二行开始的文字没有宽度长。