国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

CSS實現文字兩端對齊

Baaaan / 1190人閱讀

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

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

?

如下圖：

當時也沒有多想直接使用‘ ’進行代替，畢竟產品同學想快一點看到效果，不敢怠慢！不過到第二個頁面就傻眼了。

?

如圖：

這很明顯‘ ’已經無法滿足我了，只好上 。

這里簡單說下幾種空格的區別：

?

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

? ?  半角的空格

? ?  全角的空格

?

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

因此我們需要借助一個空標簽span。

html:

?<div>職務：<span>span>div> ?

css:

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

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

?

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

CANIUSE

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/1655.html

相關文章

  • 小技巧|CSS如何實現文字兩端對齊

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

    DevWiki 評論0 收藏0

  • 手機端單行文字兩端對齊：用css偽類實現

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

    JasonZhang 評論0 收藏0

  • 探索發現：CSS實現中文兩端對齊

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

    Aomine 評論0 收藏0

  • 探索發現：CSS實現中文兩端對齊

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

    luffyZh 評論0 收藏0

發表評論

0條評論

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