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

資訊專欄INFORMATION COLUMN

CSS 文字兩端對齊的樣式怎么寫？

NSFish / 2562人閱讀

摘要：第二次嘗試之前說了看英文原版的文檔，好的，我發(fā)現(xiàn)了一個很不錯的屬性值。好東西啊好東西，在的基礎(chǔ)上新增了對最后一行的作用。我發(fā)現(xiàn)了一個屬性叫，它可以控制最后一行的文字對齊。效果就是文章最開始的圖片。，我覺得英文版可信度更高吧。

前言

這是一個很短的文章，內(nèi)容也不多，目的其實在于吐槽MDN文檔。

需求

實現(xiàn)下圖中的樣式：

實現(xiàn)

文檔結(jié)構(gòu)：

你好


我愛中國


我是誰
第一次嘗試

很簡單嘛，使用text-align:justify不就好了？

p{
    position:relative;
    width:6em;
    text-align:justify;
}
p:after{
  content:":";
  position:absolute;
  right:-4px;
}

看看效果：

納尼？讓我來看看文檔：

justify:The inline contents are justified. Text should be spaced to line up its left and right edges to the left and right edges of the line box, except for the last line.

這里提醒一句，MDN上的text-align不要看中文版，英文原版要詳細(xì)。

看文檔的意思，justify屬性值不能作用在最后一行嘛。難怪沒有起作用。

第二次嘗試

之前說了看英文原版的文檔，好的，我發(fā)現(xiàn)了一個很不錯的屬性值：justify-all。

justify-all:Same as justify, but also forces the last line to be justified.

好東西啊好東西，在justify的基礎(chǔ)上新增了對最后一行的作用。趕緊試試：

p{
    width:6em;
    text-align:justify-all;
}

這下應(yīng)該可以了吧，來看看效果：

蛤，怎么又沒用？F12檢查看看：

這又是什么操作？屬性值居然無效。我又仔細(xì)看了看文檔，翻到最后無語了：

大哥，你這啥瀏覽器都不能用的屬性值寫了干嘛……當(dāng)然，我只是發(fā)發(fā)牢騷，這個屬性應(yīng)該是CSS3規(guī)范里有但是瀏覽器沒實現(xiàn)而已。

解決方法

折騰了一會兒，最后還是要解決問題的。我發(fā)現(xiàn)了一個屬性叫text-align-last，它可以控制最后一行的文字對齊。

p{
  position:relative;
  width:6em;
  text-align:justify;
  text-align-last:justify;
}

效果就是文章最開始的圖片。

總結(jié)

寫這篇文章就是想記錄一下text-align-last屬性及其應(yīng)用，同時吐槽一下MDN文檔。除了文章里說的“廢物”justify-all，還有中文版里直接省略justify-all這一不嚴(yán)謹(jǐn)?shù)男袨椋疫€多了個string屬性。

emmmm，我覺得英文版可信度更高吧。所以我在中文版中新增了justify-all，string我沒敢刪……

最后，文章中若有錯誤，還請不吝賜教，非常感謝。

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

轉(zhuǎn)載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/113021.html

相關(guān)文章

  • 探索發(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

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

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

    DevWiki 評論0 收藏0

  • CSS 黑魔法小技巧，讓你少寫不必要的JS，代碼更優(yōu)雅

    摘要：利用用和來做表單即時校驗需求讓表單檢驗變得簡單優(yōu)雅，不需要寫冗長的代碼來校驗設(shè)置樣式豐富了表單元素，提供了類似等表單元素屬性。不知細(xì)葉誰裁出，二月春風(fēng)似剪刀。首先，你需要先了解一下漸變的使用技巧。 之前不久，由于自己平時涉獵還算廣泛，總結(jié)了一篇博客：這些JavaScript編程黑科技，裝逼指南，高逼格代碼，讓你驚嘆不已，沒想到受到了大家的歡迎，有人希望能博主還能整理個 CSS 的一些黑...

    Berwin 評論0 收藏0

發(fā)表評論

0條評論

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