css+js解決文本左右對齊以及分散對齊__js

來源:互聯網
上載者:User

一個很簡單的設計排版樣式,A圖表示居左對其,但實際上我們想要的可能是B所示的對齊。

這就是傳說中的左右對齊 還有一種更確切的說法是兩端分散對齊。

最開始的時候 ,我試圖使用CSS來解決這個小問題,查閱了很多辦法,發現沒有一種完美相容的解決方式。

在一些csser使用了css的左右對齊方案是基於 text-align:justify 及 text-align-last:justify 實現來解決這個問題,但是需要在每個字的後面加上空格。

這個辦法是這樣的:

原理:是通過調整字之間的空格大小來達成的,所以需要事先在每個單詞和漢字間都插入一個空格。

ie下 text-align:justify; 是可以產生作用的。所以在ie下很容易實現:

p { text-align:justify;text-align-last:justify;}

text-align-last 在Firefox12-17下仍處理實驗支援階段,需加首碼 -moz-,FF下這樣實現

p{text-align:justify;-moz-text-align-last:justify;}
Chrome, Safari, Opera實現比較麻煩:Chrome23, Safari5.1.7, Opera12.11 不支援 text-align-last, 但支援 text-align 的 jsutify, text-align:justify 不處理塊內的最後一行文本(包括塊內僅有一行文本的情況,這時既是第一行也是最後一行)及被強制打斷的行的左右對齊,但會處理除此之外的其它行,所以只需要將這裡的單行變成多行即可,那麼我們可以使用偽對象的方式派生出新行,這樣不需要額外處理html代碼,然後再將派生出的新行隱藏。。
p{overflow:hidden;height:20px;text-align:justify;}
p:after{display:inline-block;content:'';overflow:hidden;width:100%;height:0;}

這樣的,基本上可以實現我們想要的效果了。
但是,我今天想要推薦的方法並不是上面的辦法,上面的辦法在靜態頁面中確實可以使用,但是無端端的增加空格對於 資料比較多的情況下 就有點麻煩,而且 ,如果文本如果是動態或者文本是使用者提交的情況,我們就很難控制在文本增加空格了。所以,我的思路是通過指令碼改變文本的letter-spacing來實現文本兩端分散對齊。
重點是演算法:
首先我們看下面圖

四行,漢字的個數分別是 2、2、4、3
我們想要達到B的效果只需要 其他幾個長度都與最長的4個漢字保持一致,這裡我們要通過增加其他行的間隙,我們使用em單位來實現。
很顯然,我們給第1-2行分別增加2em的letter-spacing來對齊;給第四行增加多少em才能對齊呢。
計算辦法  需要增加的空隙長度=(4-3)/2 也就是 (最大文本個數-當前文本個數)/(當前文本個數-1)
驗證一下:
姓名需要增加的letter-spacing值=(4-2)/(2-1)=2 同理性別也是 這樣計算
公式就是:當前文本需要增加的長度=(最大長度-當前長度)/(當前長度-1)
這樣演算法出來就好辦了
HTML中代碼如下

<p class="t1">姓名</p><p class="t1">性別</p><p class="t1">興趣愛好</p><p class="t1">座右銘</p>

JQ做了一個指令碼,針對指定樣式的行實現左右對齊。

function justify_Let(obj){ var obj=$(obj);    var lengths=[];    obj.each(function(){    lengths.push($(this).text().length);    });    //var smax=Math.max(lengths);    if(lengths.length==0){return;}    for(var i=0,smax=lengths[0],len=lengths.length;i<len;i++){    if(lengths[i]>smax){    smax=lengths[i];    }    }    for(var i=0,len=lengths.length;i<len;i++){    var currlen=lengths[i];    if(currlen==smax){continue;}    obj.eq(i).css({"letter-spacing": ((smax-currlen)/(currlen-1))+"em"});    }

html頁面調用辦法

<script type="text/javascript">// <![CDATA[justify_Let(".t1")// ]]></script>

這種辦法處理起來有好處的
優點:
1、無需增加多餘的空格或者Null 字元或者空行
2、對動態添加的文本同樣生效
3、對使用者輸入的文本也同樣適用
4、無論多少行數都會自動左右對齊

缺點:
1、需要使用js和jq指令碼實現,增加了一個指令碼的請求。
2、目前只能支援每行都是中文字元或者每行都是英文,因為計算辦法是文本長度。
3、多行大小寫同時存在的情況也還沒能實現相容。

原創文章,轉載請註明出處。歡迎轉載。

相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.