css之文本兩端對齊的兩種解決方法

css之文本兩端對齊的兩種解決方法

  提及文本對齊,你們都知道text-align,最經常使用的有left、right、center,今天咱們說一下justify,也就是文本兩端 對齊。提及來簡單,可是有些小坑你們仍是要注意的。css

  如今咱們有上圖兩行文本,實際開發中咱們常常會遇到這樣的情景:須要把姓名和電話號碼這兩段文字對齊。咱們天然會想到 text-align: justify; 我也是這麼想的,咱們來試一下:程序員

  刷新一下瀏覽器,爲何沒有效果呢?瀏覽器

  緣由是 justify 對最後一行無效,而咱們的 name 只有一行,固然也就無效了。那咱們怎麼解決這個問題呢?blog

  咱們能夠想到,既然justify對最後一行無效,那咱們增長一行就行了,只要讓它不是最後一行不就ok了?固然咱們增長的一行可不能被人看到。這裏,咱們想到了僞元素。開發

  增長沒有文字的一行,咱們來看看頁面:ast

  很不錯,明顯已經達到了要求。可是,這樣寫會不會太麻煩了呢,程序員都是講究高效率(懶)的人,若是能用一句代碼就完成的話,豈不樂哉?效率

  別說,真有。這裏安利一個新屬性 text-align-last ,廢話很少說,直接上代碼:程序

  一句代碼達到需求。方法

  真好,真好。im

相關文章
相關標籤/搜索