盤點(diǎn)CSS文本兩端對(duì)齊的N種方式

作者：XboxYan 2024-09-10 21:11:55

加空格的方式比較符合直覺，但是只能達(dá)到近似的對(duì)齊效果，加標(biāo)簽可以實(shí)現(xiàn)精準(zhǔn)對(duì)齊，但是是純手動(dòng)，而且和文字字?jǐn)?shù)也有關(guān)系，flex布局的兩端對(duì)齊需要給每個(gè)文字套上一個(gè)標(biāo)簽，也可以在每個(gè)文字之間加上一個(gè)空標(biāo)簽，設(shè)置自動(dòng)填充。

介紹一個(gè)你可能見過的文本兩端布局（也可以叫文本均等分布），如下：

說難不難，說簡(jiǎn)單也不簡(jiǎn)單。這里盤點(diǎn)了多種實(shí)現(xiàn)該布局的方式，看看你都知道哪些吧~

一、加空格

很多人從直覺上會(huì)加空格，從視覺上達(dá)到文本兩端對(duì)齊的效果，也是比較符合直覺的，例如像這樣。

<ul class="demo">
  <li>技  術(shù)  部</li>
  <li>體驗(yàn)設(shè)計(jì)部</li>
  <li>行  政  部</li>
</ul>

但是直接加空格沒啥效果，因?yàn)槟J(rèn)情況下空格會(huì)合并。

如果不想合并，可以用white-space來改變這種行為。

li{
  white-space: pre;
}

這樣，無論敲多少個(gè)空格，都會(huì)原封不動(dòng)保留下來。

這樣就得到了一種“近似”的兩端對(duì)齊效果。

除了用white-space改變以外，還可以用 來輸入“實(shí)體”空格。

<ul>
  <li>技  術(shù)  部</li>
  <li>體驗(yàn)設(shè)計(jì)部</li>
  <li>行  政  部</li>
</ul>

也能得到類似的效果。

二、加標(biāo)簽

上面的實(shí)現(xiàn)其實(shí)只是“近似”的，并不能完美對(duì)齊，如下：

很明顯還是差了點(diǎn)。

不過可以換一種思路，因?yàn)榭崭癫⒉荒芎芎玫拿枋鲆粋€(gè)中文字符的寬度，無論多少個(gè)空格，總是有點(diǎn)差距的，所以這里可以手動(dòng)加一個(gè)空標(biāo)簽。

<ul>
  <li>技<span></span>術(shù)<span></span>部</li>
  <li>體驗(yàn)設(shè)計(jì)部</li>
  <li>行<span></span>政<span></span>部</li>
</ul>

然后，我們給這些標(biāo)簽設(shè)置一個(gè)字符的寬度就好了。

li span{
  width: 1em;
}

這樣就能完美對(duì)齊了。

前面這兩種方式其實(shí)都不大推薦，局限性太大，需要手動(dòng)去補(bǔ)全剩余空間，如果字?jǐn)?shù)不一樣，又得手動(dòng)重新計(jì)算了。

下面介紹幾個(gè)實(shí)際更推薦的方式。

三、justify-content: space-between

很多同學(xué)可能都會(huì)想到這種方式，畢竟現(xiàn)在flex布局實(shí)在太普遍了，不過這只適合具體的元素，不適合純文本，所以需要改造一下，將所有文本拆分成單獨(dú)的標(biāo)簽，類似這樣。

<ul>
  <li><span>技</span><span>術(shù)</span><span>部</span></li>
  <li><span>體</span><span>驗(yàn)</span><span>設(shè)</span><span>計(jì)</span><span>部</span></li>
  <li><span>行</span><span>政</span><span>部</span></li>
</ul>

這么多標(biāo)簽，手寫太麻煩了，可以在 JS自動(dòng)生成。

txt.split('').map(el => `<span>${el}</span>`).join('')

然后直接利用flex布局的兩端對(duì)齊就可以了。

li{
  display: flex;
  justify-content: space-between;
}

效果如下：

而且這種適應(yīng)性更好，改變外層寬度，也能做到兩端對(duì)齊。

四、flex:1

利用flex布局，還可以用另一種方式來實(shí)現(xiàn)。

我們可以在每個(gè)字符中間都添加一個(gè)空標(biāo)簽，然后讓這些空標(biāo)簽自動(dòng)分配剩余空間，這樣不就實(shí)現(xiàn)文本兩端對(duì)齊了嗎？

<ul>
  <li>技<span></span>術(shù)<span></span>部</li>
  <li>體<span></span>驗(yàn)<span></span>設(shè)<span></span>計(jì)<span></span>部</li>
  <li>行<span></span>政<span></span>部</li>
</ul>

同樣可以用JS來生成，相比上一種方式更容易。

txt.split('').join('<span></span>')

然后設(shè)置flex:1。

li{
  display: flex;
}
li span{
  flex: 1;
}

效果如下：

這兩種方式適應(yīng)性更好，基本可以在實(shí)際生產(chǎn)使用了，不過需要對(duì)HTML進(jìn)行改造，稍微麻煩點(diǎn)，而且看著不夠干凈，畢竟都是空標(biāo)簽，沒有實(shí)際價(jià)值。

下面再介紹兩個(gè)不需要改變HTML的方式。

五、text-align: justify

文本對(duì)齊方式中天然就有一個(gè)兩端對(duì)齊的方式，叫做justify，但是這種方式不包括最后一行。

由于不支持最后一行，所以對(duì)于單行文本，這種對(duì)齊方式自然也就失效了。

既然不支持單行文本，我們可以手動(dòng)讓“單行”變成“多行”，具體做法其實(shí)也很簡(jiǎn)單，用一個(gè)偽元素，強(qiáng)制換行就可以了，具體實(shí)現(xiàn)如下：

li::after{
  content: '';
  display: inline-block;
  width: 100%;
}

這樣在設(shè)置text-align: justify時(shí)，原本的第一行就不再是最后一行了，自然也就生效了。

li{
  text-align: justify;
}

效果如下：

不過由于換行的關(guān)系，導(dǎo)致整體高度要比以前高出一部分，所以這種方式需要手動(dòng)限制一個(gè)高度。

li{
  text-align: justify;
  height: 24px;
  line-height: 24px;
}

這樣就完美實(shí)現(xiàn)了。

另外，在 MDN文檔上還看到這樣一個(gè)屬性值justify-all，可以滿足我們的需求。

不過現(xiàn)在還沒有任何瀏覽器支持。

六、text-align-last: justify

CSS中還有一個(gè)專門適用于最后一行文本的對(duì)齊方式，叫做text-align-last，剛好可以滿足這個(gè)場(chǎng)景。所以我們可以在HTML不做任何修改的情況下，設(shè)置最后一行文本兩端對(duì)齊就可以了。

li{
  text-align-last: justify;
}

效果如下：

這應(yīng)該是最完美的方式了，不過兼容性稍微差點(diǎn)，又是Safari脫了后腿。

七、SVG 中的lengthAdjust

除了以上CSS的各種方式外，SVG中也可以實(shí)現(xiàn)類似這樣的文本兩端對(duì)齊，需要用到lengthAdjust屬性。

這個(gè)屬性有兩個(gè)值，一個(gè)是spacing，表示剩余空間自動(dòng)填充，另一個(gè)是spacingAndGlyphs，表示會(huì)讓字符自動(dòng)壓縮或拉伸來適配整個(gè)文本長(zhǎng)度（textLength）。

<svg width="300" height="150" xmlns="http://www.w3.org/2000/svg">
  <g font-face="sans-serif">
    <text x="0" y="20" textLength="300" lengthAdjust="spacing">
      Stretched using spacing only.
    </text>
    <text x="0" y="50" textLength="300" lengthAdjust="spacingAndGlyphs">
      Stretched using spacing and glyphs.
    </text>
    <text x="0" y="80" textLength="100" lengthAdjust="spacing">
      Shrunk using spacing only.
    </text>
    <text x="0" y="110" textLength="100" lengthAdjust="spacingAndGlyphs">
      Shrunk using spacing and glyphs.
    </text>
  </g>
</svg>

效果如下：

我們也可以用這種對(duì)齊方式來實(shí)現(xiàn)我們想要的效果。

八、總結(jié)和說明

以上共介紹了7種方式來實(shí)現(xiàn)文本兩端對(duì)齊，完整 demo 可以查看以下鏈接。

CSS text justify (juejin.cn)[1]

除此之外，你還知道哪些方式呢？歡迎留言討論，下面總結(jié)一下。

加空格的方式比較符合直覺，但是只能達(dá)到近似的對(duì)齊效果。
加標(biāo)簽可以實(shí)現(xiàn)精準(zhǔn)對(duì)齊，但是是純手動(dòng)，而且和文字字?jǐn)?shù)也有關(guān)系。
flex布局的兩端對(duì)齊需要給每個(gè)文字套上一個(gè)標(biāo)簽。
也可以在每個(gè)文字之間加上一個(gè)空標(biāo)簽，設(shè)置自動(dòng)填充。
text-align: justify可以實(shí)現(xiàn)文本兩端對(duì)齊，但是不包括最后一行。
借助偽元素?fù)Q行，可以手動(dòng)將原本的最后一行變成非最后一行。
text-align-last: justify可以最完美的實(shí)現(xiàn)這個(gè)效果，不過兼容性欠佳。
SVG中的lengthAdjust也能實(shí)現(xiàn)類似的對(duì)齊效果。

資訊一下，如果面試（5年內(nèi)）出這樣一道題，你們覺得難嗎？

[1]CSS text justify (juejin.cn)： https://code.juejin.cn/pen/7399192945481482290

責(zé)任編輯：姜華來源：前端偵探