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指令碼，參照我的另一篇部落格

<style>p{    text-align:justify;    text-align-last:justify;    height:24px;    font-size:20px;    width:500px;} p:after{    display:inline-block;    content:'';    overflow:hidden;    width:100%;    height:0;}</style><p>文 字 間 要 有 空 格，不 然 不 管 用</P>

總結：

本文使用了樣本詳細為大家介紹了CSS實現單行本文左右對齊的執行個體，相信小夥伴對此有了進一步的瞭解，希望對你的工作有所協助！~

相關推薦：

CSS3中實現左右對齊的圖文代碼分享

css樣式如何?段落文字左右對齊的樣本

CSS如何?左右對齊詳解