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

NSFish 發布于2019-08-29 14:15 / 2743人閱讀

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

前言

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

需求

實現下圖中的樣式：

實現

文檔結構：

你好

我愛中國

我是誰

第一次嘗試

很簡單嘛，使用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不要看中文版，英文原版要詳細。

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

第二次嘗試

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

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

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

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

這下應該可以了吧，來看看效果：

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

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

大哥，你這啥瀏覽器都不能用的屬性值寫了干嘛……當然，我只是發發牢騷，這個屬性應該是CSS3規范里有但是瀏覽器沒實現而已。

解決方法

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

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

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

總結

寫這篇文章就是想記錄一下text-align-last屬性及其應用，同時吐槽一下MDN文檔。除了文章里說的“廢物”justify-all，還有中文版里直接省略justify-all這一不嚴謹的行為，而且還多了個string屬性。

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

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

云服務器 GPU云服務器 css樣式怎么寫文本兩端對齊 html兩端對齊 css的樣式

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

轉載請注明本文地址：http://www.hztianpu.com/yun/113021.html

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

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

Aomine 2019-08-29 10:58 評論0 收藏0
探索發現：CSS實現中文兩端對齊

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

luffyZh 2019-08-01 15:24 評論0 收藏0
小技巧|CSS如何實現文字兩端對齊

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

DevWiki 2019-08-30 15:53 評論0 收藏0
CSS 黑魔法小技巧，讓你少寫不必要的JS，代碼更優雅

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

Berwin 2019-08-01 17:42 評論0 收藏0