When there is little text, it will be displayed in the center, and when there is more text, it will be displayed on the left (the text of a certain module is more or less dynamic)

html:
<div class="box">
  <p id="conMore" class="content">文字内容-新增文字-新增文字-新增文字-新增文字-新增文字-新增文字</p>
</div>
css:
.box {
    
    
  padding: 10px;
  background-color: #cd0000;
  text-align: center;
}
.content {
    
    
  display: inline-block;
  text-align: left;
}