文本内容内容只有一行的时候居中，有多行时文字居左显示

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

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

var btn = document.getElementById('btnMore'), 
  content = document.getElementById('conMore');

if (btn && content) {
  btn.onclick = function() {
    content.innerHTML += '-新增文字';
  };
}

如果页面某个模块的内容是动态的，可能是几个字，也可能是一句话，然后希望文字少的时候居中显示，文字超过一行的时候居左显示，应该这样实现。除了inline-block元素，浮动元素以及绝对定位元素都具有包裹性。