其實這種需求還是蠻常見的，主要用於產品列表頁面，用於產品下面，顯示產品的名稱。
想要實現的效果為：
未知文字長度，當文字長度小於盒子寬度，也就是一行時，文字居中。
當文字長度大於盒子的寬度，會自動換行，成為多行文字，此時文字左對齊。
1、利用行內元素：
我首先想到了這個思路，思路如下：
讓p居中，p中的文字左對齊：（p的父級text-align:center; p自身text-align:left;）
p的寬度根據文字的寬度伸縮，當文字為一行時，則p的寬度小於li的寬度，居中；則看上去文字是局中的。
當大於一行時，p的寬度和li的寬度是一致的，文字就居左了。
"en效果：">
2、利用萬能的**
html**和解決方法一是一致的。主要是利用了table的牛逼特性：未知寬度的table 也是可以左右對齊的！
"en">
css實現一行文字居中，多行文字左對齊
問題及場景 當內容能一行顯示在盒子內時，文字居中對齊。當內容過多換行後顯示在盒子內時，文字左對齊。其實這種視覺上的需求還是蠻常見的。比如用於彈出提示框，當提示內容比較少時，內容居中顯示在彈出框，提示內容比較多時，內容居左對齊。但是其純css實現有點麻煩，一般就放掉這個需求，或者，使用js實現。解決方...
css實現一行文字居中，多行文字左對齊
問題及場景 當內容能一行顯示在盒子內時，文字居中對齊。當內容過多換行後顯示在盒子內時，文字左對齊。其實這種視覺上的需求還是蠻常見的。比如用於彈出提示框，當提示內容比較少時，內容居中顯示在彈出框，提示內容比較多時，內容居左對齊。但是其純css實現有點麻煩，一般就放掉這個需求，或者，使用js實現。解決方...
一行文字居中多行文字左對齊
lang en charset utf 8 titletitle head 當文字為一行是，則p的寬度小於div的寬度，p標籤居中顯示在盒子內，文字也就居中了 當大於一行時，p的寬度和div的寬度是一致的 文字就居左對齊了 rk box display inline block使p的寬度根據文字的寬...