横幅に余裕があるときはセンタリングをして、余裕がないときには左寄せにする

格好つけてセンタリングでデザインしたものの、スマホで見るとはみ出して2行になってしまうのはよくあること。
なので、はみ出しちゃった場合は自動的に左寄せにしちゃうという苦肉の策。

p { text-align:center; }
p span { display:inline-block; text-align:left; }
<p>
  <span>横幅に余裕があるときはセンタリングをして、余裕がないときには左寄せにする</span>
</p>

p span の display:inline-block; が重要、というか必須。