css實作單行文字兩端對齊的範例

在我們日常WEB前端開發中，會經常遇到單行文字實現兩端對齊的情況，不僅僅要對齊，還要兼容所有瀏覽器，那麼css如何實現兩端對齊的？今天就帶大家詳細介紹下css實作單行文字兩端對齊的範例！

p{
    text-align:justify;
    text-align-last:justify;
}

上面兩行程式碼大家都很熟悉，對於多行文字來說，基本上可以相容於所有的遊覽器，實現兩端對齊。在多行文字中，此樣式對於最後一段文字並不處理。

所以對於單行中文文字，我們需要打補丁

p:after{
    display:inline-block;
    content:'';
    overflow:hidden;
    width:100%;
    height:0;
}

我們使用after選擇器在單行文字的最後加入content，不過這時會導致p被撐開了，所以我們還需要設定高度，完整程式碼如下：

p{
    text-align:justify;
    text-align-last:justify;
    height:24px;
}
 p:after{
    display:inline-block;
    content:'';
    overflow:hidden;
    width:100%;
    height:0;
}

該方式可相容於所有主流遊覽器，至少我沒遇到不好用的。對於不支援 after選擇器的遊覽器，請使用selectivize腳本，參考 我的另一篇部落格

文 字 间 要 有 空 格，不 然 不 管 用

總結：

#本文使用了範例詳細為大家介紹了CSS實作單行本文兩端對齊的實例，相信小夥伴對此有了進一步的了解，希望對你的工作有幫助！ ~

相關推薦：

#CSS3中實作兩端對齊的圖文程式碼分享

css樣式如何實現段落文字兩端對齊的範例

#CSS如何實現兩端對齊詳解

以上是css實作單行文字兩端對齊的範例的詳細內容。更多資訊請關注PHP中文網其他相關文章！