標籤：order alt 解決 splay char span 標籤 技術分享 text
問題及情境：
當內容能一行顯示在盒子內時，文字置中對齊。
當內容過多換行後顯示在盒子內時，文字靠左對齊。
其實這種視覺上的需求還是蠻常見的。比如用於彈出提示框，當提示內容比較少時，內容置中顯示在彈出框，提示內容比較多時，內容居靠左對齊。但是其純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>
css實現一行文字置中，多行文字靠左對齊
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
