小編給大家分享一下CSS實(shí)現(xiàn)文字兩端對(duì)齊的方法是什么，希望大家閱讀完這篇文章后大所收獲，下面讓我們一起去探討吧！

創(chuàng)新互聯(lián)建站專注于巨鹿企業(yè)網(wǎng)站建設(shè),成都響應(yīng)式網(wǎng)站建設(shè)公司,商城網(wǎng)站建設(shè)。巨鹿網(wǎng)站建設(shè)公司,為巨鹿等地區(qū)提供建站服務(wù)。全流程定制制作，專業(yè)設(shè)計(jì)，全程項(xiàng)目跟蹤，創(chuàng)新互聯(lián)建站專業(yè)和態(tài)度為您提供的服務(wù)

最近的項(xiàng)目遇到了這樣的需求：（要求標(biāo)題部分不管文字多少，都必須兩端對(duì)齊）

如下圖：

當(dāng)時(shí)也沒有多想直接使用‘ ’進(jìn)行代替，畢竟產(chǎn)品同學(xué)想快一點(diǎn)看到效果，不敢怠慢！不過到第二個(gè)頁(yè)面就傻眼了。

如圖：

這很明顯‘ ’已經(jīng)無法滿足我了，只好上 。

這里簡(jiǎn)單說下幾種空格的區(qū)別：

  /*半角的不斷行的空白格*/
  /*半角的空格*/
  /*全角的空格*/

頁(yè)面效果倒是有了，但是后面復(fù)盤的時(shí)候發(fā)現(xiàn)這樣的寫法一是不靈活（雖然這里是固定內(nèi)容），二是不夠語(yǔ)義化。所以自然想通過css的方式來解決，在text-align中我們可能用到最多的是center屬性，還有一個(gè)屬性是justify（兩端對(duì)齊），不過頁(yè)面刷新后并沒有（luan）用。其實(shí)這里的text-align：justify是可以單獨(dú)使用的，前提是文本需要超過兩行，并且最后一行不會(huì)兩端對(duì)齊。

因此我們需要借助一個(gè)空標(biāo)簽span。

html:

 
職務(wù)：

css:

p{
  width:200px;
  text-align: justify;
}
p span{
  display:inline-block;
  width:100%;
}

這里最完美的做法是使用::after偽元素代替空標(biāo)簽。

PS：后面查閱資料發(fā)現(xiàn)text-align-last: justify;可以實(shí)現(xiàn)最后一行兩端對(duì)齊，但似乎兼容性很差（Safari不支持）

CANIUSE（https://caniuse.com/#search=text-align-last）

看完了這篇文章，相信你對(duì)CSS實(shí)現(xiàn)文字兩端對(duì)齊的方法是什么有了一定的了解，想了解更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！