在我們日常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實作單行本文兩端對齊的實例，相信小夥伴對此有了進一步的了解，希望對你的工作有幫助！ ~
相關推薦：
以上是css實作單行文字兩端對齊的範例的詳細內容。更多資訊請關注PHP中文網其他相關文章！
