css文字兩端對齊效果相容各瀏覽器

admin發表於2017-03-19
CSS瀏覽器

這篇文章是轉載別人的，非常的優秀，可以實現相容各個瀏覽器。

關於文字兩端對齊的應用場景這裡就不做介紹了，因為需要的朋友自然會知道為什麼會應用，下面進入正題。

如果要使用text-align屬性，直接設定值為justify即可，而text-justify屬性情況則較為複雜一下，由於使用較少，大多數人對它都比較陌生，在IE瀏覽器下的取值如下:

1.auto :允許瀏覽器使用者代理確定使用的兩端對齊法則。

2.inter-word :通過增加字之間的空格對齊文字。該行為是對齊所有文字行最快的方法。它的兩端對齊行為對段落的最後一行無效。

3.newspaper : 通過增加或減少字或字母之間的空格對齊文字。是用於拉丁文字母表兩端對齊的最精確格式。

4.distribute :處理空格很像newspaper，適用於東亞文件。尤其是泰國。

5.distribute-all-lines :兩端對齊行的方式與distribute相同，也同樣不包含兩段對齊段落的最後一行。適用於表意字文件。

6.inter-ideograph : 為表意字文字提供完全兩端對齊。他增加或減少表意字和詞間的空格。

但它最早是作為IE的私有實現，像text-overflow，overflow-x等，在FF很晚才實現，換言之有嚴格的相容性問題。並且FF，chrome需要手動在漢字間插入空白或軟換行標籤才生效，在chrome遇到的阻力就更大了。

比較好的解決方案如下:

[CSS] 純文字檢視 複製程式碼
.test1{
  text-align:justify;
  text-justify:distribute-all-lines;/*ie6-8*/
  text-align-last:justify;/* ie9*/
  -moz-text-align-last:justify;/*ff*/
  -webkit-text-align-last:justify;/*chrome 20+*/
}
@media screen and (-webkit-min-device-pixel-ratio:0){/* chrome*/
  .test1:after{
    content:".";
    display: inline-block;
    width:100%;
    overflow:hidden;
    height:0;
  }
}

完整測試程式碼如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
.box1 {
        background:red;
        width:30%;
}
.test1 {
        text-align:justify;
        text-justify:distribute-all-lines;/*ie6-8*/
        text-align-last:justify;/* ie9*/
        -moz-text-align-last:justify;/*ff*/
        -webkit-text-align-last:justify;/*chrome 20+*/
}
 @media screen and (-webkit-min-device-pixel-ratio:0) {/* chrome*/
 .test1:after {
 content:".";
 display: inline-block;
 width:100%;
 overflow:hidden;
 height:0;
}
}
</style>
</head>
<body>
<div class="box1">
  <div class="test1">姓 名</div>
  <div class="test1">姓 名 姓 名</div>
  <div class="test1">姓 名 名</div>
  <div class="test1">所 在 地</div>
  <div class="test1">工 作 單 位</div>
</div>
</body>
</html>

相關文章