整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

          聊一聊CSS文本兩端對齊

          天我們來聊一聊CSS文本兩端對齊。



          事情的起因是這樣的,在Review一位同事做的頁面時,發現好幾處字符之間寫了很多空格,于是問他為什么這么做,他說設計要求這幾個文本的呈現寬度必須一致,但它們的字符個數又不同,所以就在字符數少的文本中添加空格從而達到文本兩端對齊(字符均勻分布)的效果,于是我對他表示了侮辱性的贊美。


          用添加空格符的方式實現文本兩端對齊,除了不夠優雅,容易被羞辱之外,還有其他三個問題:


          1. 不同的瀏覽器,不同的移動設備,對空格符的展示寬度是有細微差別的,一個空格看不出影響,但是多個空格就無法保證一致了,很有可能出現沒對齊或者折行的情況。


          2. 任何頁面都避免不了修改,如果文本需要更換,并且更換后字數發生變化,這將意味著之前的空格數量需要重新調整,非常不利于維護。


          3. 某些頁面上的文本,用戶可能會去復制,但復制下來后發現含有很多空格符,仍需要二次編輯。


          因此在日常開發中要避免使用空格符來實現兩端對齊,而應該使用標準的CSS文本對齊屬性來解決。


          CSS文本對齊屬性 text-align


          這個屬性大家經常用到的值有三個:

          left:左對齊

          right:右對齊

          center:居中對齊

          它還有一個屬性值:justify,表示文本兩端對齊,也就是讓文本在固定寬度內平均分布,使兩邊不會出現空白。那么用這個屬性是否就能很好的實現文本兩端對齊呢?


          通過測試發現,單行文本通過text-align:justify; 并不能實現兩端對齊,為什么會出現這個情況?我們需要先了解一點點排版知識。



          傳統書刊的排版印刷對于整個自然段通常采用兩端對齊的方式,這樣就保證了排版的美觀和良好的閱讀體驗。但是自然段的最后一行文字是左對齊的,因為最后一行文本意味著段落的結束,沒有必要繼續兩端對齊了。


          細心的朋友應該已經猜到了,在我們測試中,文本只有一行,意味著它也是最后一行,而CSS的文本對齊方式也遵循最后一行文本默認左對齊的原則,因此不能實現兩端對齊。


          好在CSS為我們提供了另外一個屬性:text-align-last,這個屬性用來額外設置段落最后一行文本的對齊方式,因此對于單行文本,我們只需要設置:text-align-last: justify;就可以了,親測有效。


          TIPS:單行文本要想實現文本兩端對齊,除了上面說的方式,一定別忘了這個文本需要一個確定的寬度,不設置寬度,文本也就不存在兩端。因此這個單行文本不能是行內布局,而應該是塊級或者是行內塊級布局。


          好景不長,用上面的方式實現了文本兩端對齊后,發現它只是在PC上有效,但是在IOS的系統瀏覽器里毫無效果,最后發現在IOS上不支持text-align-last這個屬性,因此這個方式并不穩妥。


          那么如何解決IOS的兼容問題呢?


          著手點只有一個,那就是如何保證單行文本對于CSS來說并不是最后一行?這句話看似很奇怪,其實解決辦法很簡單,只需要給這個單行文本添加一個偽元素after即可。

          someClass: after { content: “”}

          由于添加了偽元素,單行文本不再是最后一行,偽元素才是, 同時偽元素的內容為空字符串,并不會對顯示造成影響,因此完美解決了這個問題。

          注意:偽元素after不僅要設置content,還要添加 width:100%; 和 display:inline-block; 這是因為:如果不設置寬度,偽元素內容并不會成為第二行,如果display設置成block,又造成了偽元素變成了另一個塊級元素,所以要設置為inline-block。

          最終的代碼:

          someClass {text-align:justify; width:300px;}

          someClass: after { content: “”; width:100%; display:inline-block;}

          SS之文本對齊。

          免費少兒編程開課了,同學們好!今天分享的知識是設置文本在區域中水平方向的對齊方式。用到的是 css 的 text 的align屬性,這個屬性的常用值有類似,左對齊,right 右對齊,center 居中對齊。

          Justify兩端對齊需要注意的是 text line和德瑞權文本方向有關系。如果德瑞權屬性是 l tr則默認值為列;如果德瑞權屬性是 rtl則默認值為 right。左中右對齊都很簡單,一目了然。

          但我們會注意到兩端對齊這一行并沒有達成我們想要的效果,所謂的兩端對齊就是文本的第一個字對齊區域的左邊界,文本的最后一個字對齊右邊界,中間的文本平均分布在區域內。看看代碼,確實設置了 text line 為這四個方案。

          沒有效果的原因是這個屬性對最后一行不生效,解決方案是使用 text line last屬性,先看看效果,ok,這就是兩端對齊。現階段學習到這里就可以了,但我需要提醒各位同學,text line last的兼容性是有問題的,特別是在蘋果的 ios 系統中spare 不支持這個屬性,這會導致安卓手機中顯示正常,但蘋果手機卻顯示錯誤。

          為了解決這個問題,只需要讓文本不是最后一行即可。看這段代碼,v到了前面講過的偽元素 after,在這里在文本后插入了一個內容,寬度是百分之一百,顯示方式是內塊,超出部分隱藏并設置了高為零。

          我用 after用來創建一個偽元素添加一行內容并且將其隱藏。這樣要顯示的內容就不是最后一行了,這次閥就會生效再次回到瀏覽器刷新成功。

          好了,今天的分享就到這里,所有的案例及相關文檔均可向我獲取,我們下期見。

          想學編程,點點關注。

          出里文字比較多的網頁,文字對齊其中采用的兩端對齊,兩端對齊的方法有三種方法,如下:

          1. 使用text-align:justify

          text-align:justify 屬性是全兼容的,使用它實現兩端對齊,需要注意在模塊之間添加[空格/換行符/制表符]才能起作用,同樣,實現文本對齊也是需要在字與字之間添加[空格/換行符/制表符]才能起作用

          /*
          說明:
          1.IE中要實現塊內單行兩端對齊需要使用其私有屬性text-align-last:justify配合,text-align-last 要生效,必須先定義text-align 為justify
          2.line-height:0 解決標準瀏覽器容器底部多余的空白
          */
          .content{
          text-align:justify;
          text-align-last:justify;
          line-height:0;
          height:44px;
          }
          /*
          說明:
          模塊使用[換行符]或[空格符]后,webkit瀏覽器中會引起最后一個模塊有多余空白,使用font-size:0可清除該空格
          */
          @media all and (-webkit-min-device-pixel-ratio:0){
          .content{
          font-size:0;
          }
          }
          /*
          說明:
          1.text-align-last:justify 目前只有IE支持,標準瀏覽器需要使用 .demo:after 偽類模擬類似效果
          2.opera瀏覽器需要添加 vertical-align:top 才能完全解決底部多余的空白
          */
          .content:after{
          display:inline-block;
          overflow:hidden;
          width:100%;
          height:0;
          content:'';
          vertical-align:top;
          }

          且子類必須是inline-block元素

          -------------------------------------------------------------------------------

          2. 使用box-pack:justify

          父類容器css:
          .content{
          display:-webkit-box;
          display:-webkit-flex;
          display:-ms-flexbox;
          display:flex;
          -webkit-box-pack:justify;
          -webkit-justify-content:space-between;
          -ms-flex-pack:justify;
          justify-content:space-between;
          }

          且子類必須是block元素

          -------------------------------------------------------------------------------

          3. 使用column(多列布局)

          /*
          說明:
          1.column-count定義了對象的列數
          2.column-gap定義了對象中列與列的間距

          */

          父類容器css:
          .content {
          -webkit-column-count: 2;
          -moz-column-count: 4;
          column-count: 4;
          -webkit-column-gap: 20px;
          -moz-column-gap: 20px;
          column-gap: 20px;
          }
          且子類必須是block元素

          文/丁向明

          做一個有博客的web前端自媒體人,專注web前端開發,關注用戶體驗,加我qq/微信交流:6135833

          http://dingxiangming.com


          主站蜘蛛池模板: 最新中文字幕一区二区乱码| 精品国产伦一区二区三区在线观看| 久久精品道一区二区三区| 亚洲熟妇av一区| 成人乱码一区二区三区av| 精品国产日韩亚洲一区在线| 亚洲天堂一区二区| 亚洲综合色自拍一区| 中文字幕亚洲一区| 波多野结衣免费一区视频| 一区二区三区免费在线观看| 国产一区二区三区在线免费 | 肉色超薄丝袜脚交一区二区| 日韩精品无码一区二区三区四区| 制服美女视频一区| 国产精品区一区二区三| 久久久无码精品人妻一区| 亚洲熟女综合一区二区三区| 99久久精品午夜一区二区| 学生妹亚洲一区二区| 亚洲一区二区无码偷拍| 亚洲sm另类一区二区三区| 久久久久久人妻一区二区三区| 伊人色综合一区二区三区影院视频| 久久无码AV一区二区三区| 国产高清在线精品一区| 亚洲熟妇无码一区二区三区导航| 亚洲综合激情五月色一区| 蜜芽亚洲av无码一区二区三区| 亚洲AV无码国产一区二区三区| 无码人妻一区二区三区av| 日本强伦姧人妻一区二区| www一区二区www免费| 久久国产精品一区二区| 亚洲一区二区三区在线网站| 无码人妻精品一区二区三区9厂| 一区二区在线视频免费观看| 国产在线aaa片一区二区99| 无码av免费一区二区三区| 麻豆精品人妻一区二区三区蜜桃| 国产一区二区三区不卡在线看 |