成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

CSS實現(xiàn)文字兩端對齊

Baaaan / 1191人閱讀

摘要：后面查閱資料發(fā)現(xiàn)可以實現(xiàn)最后一行兩端對齊，但似乎兼容性很差不支持

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

?

如下圖：

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

?

如圖：

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

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

?

? ?  半角的不斷行的空白格

? ?  半角的空格

? ?  全角的空格

?

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

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

html:

?<div>職務(wù)：<span>span>div> ?

css:

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

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

?

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

CANIUSE

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/1655.html

相關(guān)文章

  • 小技巧|CSS如何實現(xiàn)文字兩端對齊

    摘要：需求如下，紅框所在的文字有四個字的三個字的兩個字的，如果不兩端對齊可以選擇居中對齊，或者右對齊。其實現(xiàn)的效果就是可以讓一行文字兩端對齊顯示文字內(nèi)容要超過一行。 showImg(https://segmentfault.com/img/remote/1460000011336397); 需求如下，紅框所在的文字有四個字的、三個字的、兩個字的，如果不兩端對齊可以選擇居中對齊，或者右對齊。但...

    DevWiki 評論0 收藏0

  • 手機(jī)端單行文字兩端對齊：用css偽類實現(xiàn)

    摘要：今天在做項目的時候碰到這個問題右側(cè)紅線內(nèi)的小標(biāo)題單行兩端對齊。兩端對齊的屬性我們知道是，但是這個屬性有它的局限性只能為或多行文字才能實現(xiàn)兩端對齊。也就是說，在現(xiàn)在的情況下，小標(biāo)題的單行文字僅僅使用是實現(xiàn)不了兩端對齊的。 今天在做項目的時候碰到這個問題：右側(cè)紅線內(nèi)的小標(biāo)題單行兩端對齊。 showImg(https://segmentfault.com/img/bVQv1a?w=319&h...

    JasonZhang 評論0 收藏0

  • 探索發(fā)現(xiàn)：CSS實現(xiàn)中文兩端對齊

    摘要：今天在搜索實現(xiàn)中文兩端對齊的解決方法時，偶然發(fā)現(xiàn)了這個我遇到問題是看不到效果，無論是英文還是中文，在和下都不起作用。首先，大家要知道，是專門為英文設(shè)計的，誰叫是老外發(fā)明的呢，用來實現(xiàn)英文語句的兩端對齊。 今天在搜索CSS實現(xiàn)中文兩端對齊的解決方法時，偶然發(fā)現(xiàn)了這個hack： 我遇到問題是：看不到效果，無論是英文還是中文，在IE和chrome下都不起作用。還好在StackOverflo...

    Aomine 評論0 收藏0

  • 探索發(fā)現(xiàn)：CSS實現(xiàn)中文兩端對齊

    摘要：今天在搜索實現(xiàn)中文兩端對齊的解決方法時，偶然發(fā)現(xiàn)了這個我遇到問題是看不到效果，無論是英文還是中文，在和下都不起作用。首先，大家要知道，是專門為英文設(shè)計的，誰叫是老外發(fā)明的呢，用來實現(xiàn)英文語句的兩端對齊。 今天在搜索CSS實現(xiàn)中文兩端對齊的解決方法時，偶然發(fā)現(xiàn)了這個hack： 我遇到問題是：看不到效果，無論是英文還是中文，在IE和chrome下都不起作用。還好在StackOverflo...

    luffyZh 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<