溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
小編給大家分享一下CSS實現文字兩端對齊的方法是什么，希望大家閱讀完這篇文章后大所收獲，下面讓我們一起去探討吧！
最近的項目遇到了這樣的需求：（要求標題部分不管文字多少，都必須兩端對齊）
如下圖：
當時也沒有多想直接使用‘ ’進行代替，畢竟產品同學想快一點看到效果，不敢怠慢！不過到第二個頁面就傻眼了。
如圖：
這很明顯‘ ’已經無法滿足我了，只好上 。
這里簡單說下幾種空格的區別：
/*半角的不斷行的空白格*/   /*半角的空格*/   /*全角的空格*/
頁面效果倒是有了，但是后面復盤的時候發現這樣的寫法一是不靈活（雖然這里是固定內容），二是不夠語義化。所以自然想通過css的方式來解決，在text-align中我們可能用到最多的是center屬性，還有一個屬性是justify（兩端對齊），不過頁面刷新后并沒有（luan）用。其實這里的text-align：justify是可以單獨使用的，前提是文本需要超過兩行，并且最后一行不會兩端對齊。
因此我們需要借助一個空標簽span。
html:
<p>職務：<span></span></p>
css:
p{
width:200px;
text-align: justify;
}
p span{
display:inline-block;
width:100%;
}這里最完美的做法是使用::after偽元素代替空標簽。
PS：后面查閱資料發現text-align-last: justify;可以實現最后一行兩端對齊，但似乎兼容性很差（Safari不支持）
CANIUSE（https://caniuse.com/#search=text-align-last）
看完了這篇文章，相信你對CSS實現文字兩端對齊的方法是什么有了一定的了解，想了解更多相關知識，歡迎關注億速云行業資訊頻道，感謝各位的閱讀！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
