在網(wǎng)頁的世界里，文字就像是一位位優(yōu)雅的舞者，它們的排列方式直接決定了舞臺的整體美感。想象一下，當你打開一個網(wǎng)頁，看到的文字參差不齊，是不是瞬間就覺得這個頁面有些 “亂糟糟”，毫無精致感可言？但要是文字都整整齊齊地兩端對齊，那感覺就如同進入了一個井然有序的藝術展廳，每一處細節(jié)都透露著專業(yè)與用心。比如說，一個新聞資訊類的網(wǎng)頁，一篇篇文章的段落采用兩端對齊后，文字均勻分布在頁面兩側(cè)，就像訓練有素的士兵在整齊列隊，讓讀者的目光能夠順滑地沿著文字游走，輕松吸收信息，大大提升了閱讀體驗。再看電商網(wǎng)站上的商品介紹，整齊的文字排版會讓產(chǎn)品特點、參數(shù)等信息一目了然，仿佛一位專業(yè)導購在清晰講解，無形中增加了產(chǎn)品的可信度，促進購買決策。對于個人博客而言，兩端對齊的文字更是博主審美與用心的體現(xiàn)，讓每一篇文章都更具觀賞性，讀者沉浸其中，流連忘返。可以說，CSS 文字兩端對齊就像是網(wǎng)頁設計中的 “美顏濾鏡”，一鍵提升整體顏值，牢牢抓住用戶的眼球。

基礎方法：加空格與加標簽

加空格：簡單粗暴的初嘗試

很多小伙伴剛接觸文字兩端對齊時，腦海里蹦出的第一個想法可能就是加空格。這確實是最符合直覺的做法，就像我們平時手寫文檔，為了讓文字排列整齊，會不自覺地在字與字之間添加空格。在 CSS 里，我們也可以這么干，比如有一個無序列表，里面是幾個部門名稱：但你會發(fā)現(xiàn)，直接在代碼里敲空格沒啥用，因為在 HTML 中，默認情況下多個連續(xù)空格會合并成一個。這時候，CSS 的 white-space 屬性就派上用場啦，給 li 元素設置 white-space: pre;，它就能保留你輸入的所有空格，像這樣：如此一來，無論你敲多少個空格，都會原封不動地顯示出來，文字就有了一種 “近似” 的兩端對齊效果。除了 white-space，還有個小妙招，就是使用 “實體” 空格  ，用它來代替普通空格，也能達到類似的效果：不過這種加空格的方法，只能算是 “治標不治本”，仔細看的話，還是會發(fā)現(xiàn)文字并沒有真正完美對齊，而且如果文字內(nèi)容有變動，還得重新調(diào)整空格數(shù)量，相當麻煩。

加標簽：手動精準對齊

既然加空格不太靠譜，那咱們就換個思路?？崭癫荒芫珳拭枋鲋形淖址膶挾?，那我們手動加空標簽來控制間距總行了吧！比如還是剛才的部門列表，我們在文字中間手動插入空的 <span> 標簽：然后給這些空標簽設置一個字符的寬度，通常是 width: 1em;（1em 大約等于一個字符的寬度）：這下，文字就真的完美對齊了！但這種方法也有個大缺點，就是太依賴手動操作。如果文字很多，或者經(jīng)常變動，每次都要去添加、調(diào)整空標簽，簡直是個 “體力活”，效率非常低，所以在實際項目中，這種方法也不太常用，除非是一些簡單且基本不會變動的文本排版場景。

進階技巧：flex 布局顯神通

justify-content: space-between

前面的方法要么效果不佳，要么操作繁瑣，別著急，強大的 flex 布局來 “救場” 啦！大家都知道，flex 布局在網(wǎng)頁排版中就像是個萬能工具，對于文字兩端對齊，它也有妙招。不過，直接用 justify-content: space-between 對純文本可不太好使，因為它通常是針對一個個具體的元素進行布局的。那怎么辦呢？咱們可以巧妙地將文本拆分成單獨的標簽，就像這樣：要是一個個手寫這些標簽，那可太費勁了，好在咱們有 JavaScript 這個好幫手，用它來自動生成這些標簽，簡直不要太輕松：生成好標簽后，給父元素（這里的 li）設置 display: flex;，子元素（span）就能在主軸上靈活排列，再加上 justify-content: space-between;，文本就如同訓練有素的士兵，整整齊齊地兩端對齊啦！而且這種方法的適應性超強，不管外層容器的寬度怎么變，文字始終能保持優(yōu)雅的兩端對齊姿態(tài)，是不是很厲害？

flex:1

flex 布局還有另一個 “絕招”。咱們可以在每個字符中間都添加一個空標簽，像這樣：同樣，用 JS 生成這些空標簽也很便捷：接著，給父元素設置 display: flex;，讓它變成一個 flex 容器，再給這些空標簽設置 flex: 1;。這意味著這些空標簽就像一個個有彈性的小彈簧，會自動分配剩余空間，把文字均勻地撐開，實現(xiàn)完美的兩端對齊效果。和上一個方法相比，這個方法更容易理解和操作，就算是 CSS 新手，也能快速上手，輕松打造出精致的文字排版。

無需改 HTML 的妙招：text-align 系列

text-align: justify

在 CSS 的文本對齊屬性 “大家族” 里，text-align: justify 可是實現(xiàn)兩端對齊的一把好手。不過呢，它有個小脾氣，對單行文本不太 “感冒”，直接使用的話，單行文本就是不肯乖乖兩端對齊。這可難不倒我們，既然它喜歡多行，那咱們就給它 “造” 多行出來！利用偽元素 ::after，在文本元素后面悄悄插入一個空的行內(nèi)塊元素，像這樣：然后再給父元素設置 text-align: justify;，原本 “倔強” 的單行文本就會誤以為自己處在多行環(huán)境中，老老實實地兩端對齊啦。但這里要注意一個小細節(jié)，因為插入了偽元素換行，文本的整體高度可能會悄悄增加，所以得手動給元素設置一個合適的高度，不然頁面布局可能會出現(xiàn)一些小 “偏差”，影響美觀。

text-align-last: justify

如果不想折騰偽元素，CSS 還有個更直接的屬性 ——text-align-last: justify。這個屬性就像是一個 “獨行俠”，專門負責搞定最后一行文本的兩端對齊問題。只要簡單地給元素設置 text-align-last: justify;，就能輕松實現(xiàn)效果：是不是超級簡單？不過，可別高興得太早，這個屬性在兼容性方面有點小 “傲嬌”，部分老版本瀏覽器，尤其是 IE 瀏覽器，對它的支持不太友好。所以在使用的時候，一定要考慮項目的瀏覽器兼容性需求，如果面向的用戶群體還在大量使用舊瀏覽器，那可得謹慎選擇，或者搭配一些兼容性處理代碼，確保頁面在各種瀏覽器上都能完美呈現(xiàn)。

SVG 中的另類解法：lengthAdjust 屬性

當我們在 SVG（Scalable Vector Graphics，可縮放矢量圖形）的世界里遨游時，會發(fā)現(xiàn)它也為我們提供了一種獨特的文字兩端對齊方式，那就是借助 lengthAdjust 屬性。這個屬性就像是一位神奇的 “空間魔法師”，能輕松操控文本在 SVG 圖形中的排列。lengthAdjust 有兩個超能力值，一個是 spacing，當文本長度小于指定的 textLength 時，它就會大顯身手，自動填充剩余空間，讓文字均勻分布，就像一群小朋友手拉手站成一排，間隔相等。另一個是 spacingAndGlyphs，它的本領更加強大，不僅能調(diào)整字符間隔，還能讓字符本身 “伸縮自如”，根據(jù)整體文本長度的需求，適當壓縮或拉伸字符，確保文本完美適配給定的長度。在這個例子中，第一行文本使用 spacing，多余的空間會均勻分配到字符之間；第二行文本采用 spacingAndGlyphs，字符和間距都會協(xié)同變化，以達到最佳的適配效果；第三行文本由于指定的 textLength 較短，使用 spacing 時，字符間隔會縮小，文字 “緊緊抱團”，實現(xiàn)收縮對齊。不過，這種方法在日常的網(wǎng)頁排版中用得相對較少，因為 SVG 主要用于圖形相關的場景，與傳統(tǒng)的 HTML 文本排版有不同的 “分工”。但在一些需要將文本與圖形深度融合，打造獨特視覺效果的項目中，比如精美的信息圖、動態(tài)交互的圖形界面等，SVG 的 lengthAdjust 屬性就能發(fā)揮出它的獨特魅力，讓文字與圖形相得益彰，創(chuàng)造出令人驚艷的視覺體驗。

總結(jié)與選擇建議

咱們一路探索下來，發(fā)現(xiàn) CSS 文字兩端對齊的方法還真不少，各有千秋。加空格、加標簽簡單直接，但效果粗糙、手動操作麻煩；flex 布局強大靈活，適應性強，可代碼稍顯復雜，還得改動 HTML 結(jié)構(gòu)；text-align 系列方便快捷，部分屬性兼容性欠佳；SVG 中的 lengthAdjust 屬性獨特新穎，不過適用場景有限。那在實際項目里，到底咋選呢？要是處理簡單的少量文本，對精度要求不高，加空格或 text-align: justify 就能應付。文本較多、追求完美對齊，且不排斥改 HTML，flex 布局的兩種技巧是首選。若項目對兼容性要求苛刻，特別是要兼容老舊瀏覽器，偽元素輔助 text-align: justify 的組合更穩(wěn)妥。涉及 SVG 圖形與文本融合，lengthAdjust 屬性就該登場了。無論選哪種，多在不同瀏覽器測試是關鍵，確保頁面在 Chrome、Firefox、IE 等主流瀏覽器中都顏值在線。CSS 文字兩端對齊就像一場有趣的探索之旅，大家多動手、多嘗試，讓網(wǎng)頁文字從 “凌亂” 走向 “精致”，輕松拿捏排版美學，打造用戶愛不釋手的優(yōu)質(zhì)頁面！