真正可用的CSS文字兩端對齊

2022-03-03 01:58:23 字數 610 閱讀 7226

最近在工作專案中接觸到web介面設計的問題,要實現文字兩端對齊的效果。在網上搜尋了一下,差不多都是互相**,用的都是類似的技巧:

text-align:justify;

text-justify:inter-ideograph;

但問題是,我怎麼就看不到效果呢?無論是英文還是中文,在ie和chrome下都不起作用。後來,終於在stackoverflow上找到解決方法了。

樣式:

div.justify 

div.justify > span

html:

hello, text justify.

hello, text justify.

中 文 兩 端 對 齊

中 文 兩 端 對 齊

效果圖:

從效果圖可以看到,除了要在塊級元素加text-align:justify樣式外,還需要在裡面加乙個空的span元素,並應用樣式。另外,對於中文還必須用空格隔開漢字,否則也沒有兩端對齊的效果。英文每個單詞都有空格隔開,所以沒問題。

css實現文字兩端對齊

實現如下效果 css 實現如下 第一種方案 oldprice label oldprice label after active lists nowprice active lists nowprice label active lists nowprice points 原價 50元 首單價200...

css之文字兩端對齊

在進行網頁設計時,我們經常會看到這樣的樣式 文字兩端對齊。css為我們提供了乙個屬性可以實現這樣的效果 text align justify。不過這個只能用來設定多行文字 除最後一行 如果只有單行的話,是不起效果的。那怎麼辦呢?這裡有兩種解決方案 借助偽元素或者內聯元素使文字不是最後一行。具體 sc...

CSS之文字兩端對齊

說起text align,大家一定都不覺得陌生,我們常用關鍵字left right center實現行內元素相對父元素左 右 居中對齊,當然我們也使用justify來實現文字兩端對齊。如上圖,兩端對齊相對於左對齊,視覺上顯得整齊有序。但justify對最後一行無效,通常這樣的排版對整段文字是極好的,...