css js解決文字兩端對齊以及分散對齊

2021-06-20 11:47:17 字數 2095 閱讀 8531

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

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

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

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

這個辦法是這樣的:

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

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

p
text-align-last 在firefox12-17下仍處理實驗支援階段,需加字首 -moz-,ff下這樣實現

p
chrome, safari, opera實現比較麻煩:chrome23, safari5.1.7, opera12.11 不支援 text-align-last, 但支援 text-align 的 jsutify, text-align:justify 不處理塊內的最後一行文字(包括塊內僅有一行文字的情況,這時既是第一行也是最後一行)及被強制打斷的行的兩端對齊,但會處理除此之外的其它行,所以只需要將這裡的單行變成多行即可,那麼我們可以使用偽物件的方式派生出新行,這樣不需要額外處理html**,然後再將派生出的新行隱藏!!

p
p:after
這樣的,基本上可以實現我們想要的效果了。

但是,我今天想要推薦的方法並不是上面的辦法,上面的辦法在靜態頁面中確實可以使用,但是無端端的增加空格對於 資料比較多的情況下 就有點麻煩,而且 ,如果文字如果是動態的或者文字是使用者提交的情況,我們就很難控制在文字增加空格了。所以,我的思路是通過指令碼改變文字的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中**如下

姓名

性別興趣愛好

座右銘

jq做了乙個指令碼,針對指定樣式的行實現兩端對齊。

function justify_let(obj));

//var smax=math.max(lengths);

if(lengths.length==0)

for(var i=0,smax=lengths[0],len=lengths.length;ismax)

}for(var i=0,len=lengths.length;ihtml頁面呼叫辦法

這種辦法處理起來有好處的

優點:1、無需增加多餘的空格或者空字元或者空行

2、對動態新增的文字同樣生效

3、對使用者輸入的文字也同樣適用

4、無論多少行數都會自動兩端對齊

缺點:1、需要使用js和jq指令碼實現,增加了乙個指令碼的請求。

2、目前只能支援每行都是中文字元或者每行都是英文,因為計算辦法是文字長度。

3、多行大小寫同時存在的情況也還沒能實現相容。

文字兩端對齊

學習貼 最近在工作專案中接觸到web介面設計的問題,要實現文字兩端對齊的效果。在網上搜尋了一下,用的都是類似的技巧 text align justify text justify inter ideograph 我遇到問題是 看不到效果,無論是英文還是中文,在ie和chrome下都不起作用。還好在s...

css text align文字兩端對齊

text align start end left right center justify match parent justify all justify 內容兩端對齊,但對於強制打斷的行 被打斷的這一行 及最後一行 包括僅有一行文字的情況,因為它既是第一行也是最後一行 不做處理。start 內...

文字兩端對齊text align justify

使用text align justify可以實行文字兩端對齊,但他在大段文字中使用效果較好。因為該屬性會自動忽略最後一行。由下面兩圖可以看出,加了justify屬性,文字會兩端對齊,除了最後一行,這也符合一般規範。未加text align justify 加了text align justify 但...