如何實現 單行時居中對其,多行時最後一行左對齊?

一個div 。 只有一行時讓文本居中對齊, 可是有多行時最後一行依然居中對齊，明顯就很難看。

求教: 如何讓 一行文本時 居中，有多行時 左對齊？？

ps: 不要用 js .

想求教下有沒什麼 技巧靠 css 和 html 就可以？？

我大概查了下,

text-align-last 是最好的辦法了，可是支持性實在是太差。

有個 first-line 的偽對象，可是卻沒 last-line ；

好吧 想了半天 first-line 貌似也可以。

整體都左對齊,只讓第一行 居中對齊（因為有多行時,第一行的文字佔滿一行,居中對齊的效果看起來和左對齊一樣）。

於是寫如下 css

p{
text-align: left;
}
p::first-line{
text-align: center;
color: red;
}


可是只有 一行文字時，字倒是變紅了，可是沒有居中呀。

以為是第一行這個偽類 所表示的只是文字的所在區域,寬度就是 文字的寬度，所以沒居中。

於是 在 偽類中加上 display:block; width:100%;

我擦，，，，然後發現我想多了，還是沒居中對齊呀。

求教各位大神，，，，有沒什麼比較 好的辦法呀？

只有一行時居中對齊, 多行時 左對齊。

不用js。

----------------------------------------------------------------------------------------------

----------------------------------------------------------------------------------------------

分割線

感覺我需求說的很明確呀，

只有一行文字的時候居中對其。 多行的時候左對齊。

難道是我語文不好，還是有人沒理解，希望我給效果圖？？？

好吧，我把這個問題的前因後果及各種各樣的效果圖發出。

懂的人就不用看了，直接跳過。

做一個數據展示列表。

上面的效果，可是不好看呀，產品簡介 就4個字，明顯居中要好看些。於是有下張

居中對齊後明顯比上面好看多了。

可是問題來了，只有一行的時候居中對齊ok，當有多行的時候就是下面這樣了。

最後一行的幾個字居中對齊很不協調呀。想要的效果應該是這個樣子的。

對，沒錯，這就是我所說的，一行文字的時候居中對齊，多行時左對齊。

內容是 從服務端拿來的。我是不知道這段內容是否會產生多行。

ps： 不要問提他和效果無關的問題。 (比如：全部左對齊也蠻好看呀,為何不能全左對齊？因為，全部左對齊，當前頁的所有產品簡介就一點點的時候，會很難看。不如居中對齊好看。)

---

可以讓p text-align:justify;display:inline-block;給p加一個外層的框div，這個外層的框text-align:center;

這樣p隨著文字的寬度變化，並且p在div中居中，當p寬度不夠一行的時候就看起來是居中的

css實現一段不夠一行時居中顯示，多於一行時兩端對齊

---

純CSS實現文字一行居中，多行左對齊的方法 - FungLeo的博客 - CSDN博客

---

這TM誰提的問題也不改一下標題

---

你好題主實現了嗎？我還想問下現在有沒有已經實現的軟體，就是在文本框內，沒有填東西的文本框先設置它的文字呈現形式，為以後如果填寫的時候直接顯示為想要的效果

---

推薦閱讀：