文字布局

页面某个模块的文字内容是动态的，可能是几个字，也可能是一句话。然后，希望文字少的时候居中显示，文字超过一行的时候居左显示。该如何实现？

链接

<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 += '-新增文字';
  };
}