文字布局

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

链接

  1. <div class="box">
  2.   <p id="conMore" class="content">文字内容-新增文字-新增文字-新增文字-新增文字-新增文字-新增文字-新增文字-新增文字-新增文字-新增文字-新增文字-新增文字-新增文字</p>
  3. </div>
  4. <!-- 按钮 -->
  5. <p><button id="btnMore">更多文字</button></p>
  1. .box {
  2.   padding: 10px;
  3.   background-color: #cd0000;
  4.   text-align: center;
  5. }
  6. .content {
  7.   display: inline-block;
  8.   text-align: left;
  9. }
  1. var btn = document.getElementById('btnMore'), 
  2.   content = document.getElementById('conMore');
  4. if (btn && content) {
  5.   btn.onclick = function() {
  6.     content.innerHTML += '-新增文字';
  7.   };
  8. }