text-align: justify;?是 CSS 中用于控制文本對齊方式的屬性值，它的核心作用是讓文本兩端對齊（分散對齊），使段落左右邊緣整齊排列。以下是詳細解析：

---

作用效果

1. 均勻分布間距
   瀏覽器會自動調整單詞/字符之間的間距，使文本的左右兩端同時對齊容器邊界（首行縮進除外）。

   • ??非最后一行：每行文本左右兩端嚴格對齊容器邊緣（類似報紙排版）。

   • ??最后一行：默認按左對齊處理（除非額外設置?text-align-last: justify;）。

2. 視覺體驗
   適合大段文本排版（如文章、新聞），能創建整潔的塊狀文本區域，提升可讀性和專業感。

---

對比其他對齊方式

屬性值	效果	示例
justify	兩端對齊（分散對齊）	[文本左右平齊]
left?(默認)	左對齊	[文本靠左參差]
right	右對齊	[參差文本靠右]
center	居中對齊	[文本居中參差]

---

代碼示例

html

復制

下載

運行

<style>.justified-text {text-align: justify; /* 關鍵屬性 */width: 300px;       /* 需要固定寬度 */border: 1px solid #ccc;padding: 10px;}
</style><div class="justified-text">This is a sample text demonstrating justified alignment. The browser will adjust spaces between words to make both edges flush.
</div>

---

注意事項

1. 容器需有寬度
   只在固定寬度容器中生效（如?width: 500px;），否則文本無分散空間。

2. 最后一行問題
   默認最后一行左對齊，需額外添加解決：

   css

   復制

   下載

   text-align: justify;
   text-align-last: justify; /* 強制最后一行兩端對齊 */

3. 單詞間距過寬
   長單詞或短行可能導致間距過大，可通過?hyphens: auto;?添加連字符優化：

   css

   復制

   下載

   hyphens: auto; /* 自動在單詞內添加換行連字符 */

---

適用場景

• 報紙/雜志風格的文章排版

• 多欄布局（column-layout）

• 需要嚴謹視覺設計的文本塊

?? 避免在窄容器中使用（如手機屏幕），過大的單詞間距會降低可讀性。