問題及場景：
當內容能一行顯示在盒子內時，文字居中對齊。
當內容過多換行后顯示在盒子內時，文字左對齊。
其實這種視覺上的需求還是蠻常見的。比如用於彈出提示框，當提示內容比較少時，內容居中顯示在彈出框，提示內容比較多時，內容居左對齊。但是其純CSS實現有點麻煩，一般就放掉這個需求，或者，使用JS實現。
解決方案：
效果如下
CSS實現代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
/*當文字為一行是，則P的寬度小於div的寬度，p標簽居中顯示在盒子內，文字也就居中了 ;當大於一行時，P的寬度和div的寬度是一致的 ,文字就居左對齊了*/
.content { width: 200px; border: 1px solid #ee2415; text-align: center ;padding: 2px 5px}
/*display: inline-block使P的寬度根據文字的寬度伸縮 */
.content p { text-align: left; display: inline-block }
</style>
<body>
<div class="content">
<p>內容只有一行居中</p>
</div>
<br>
<div class="content">
<p>內容多行左對齊，內容多行左對齊</p>
</div>
</body>
</html>