text-align:justify 兩端對齊

admin發表於2019-01-21

text-align屬性可以設定內聯或者文字在其父元素內的對齊方式，應用非常頻繁。

最為常用的屬性值有三個，分別是left、center和right。

還有一個在某些場景下非常好用的屬性值justify，它可以設定文字或者內聯元素兩端對齊。

在應用中，很多朋友可能會發現，此屬性值有時候生效，有時候不生效。

下面通過程式碼例項介紹一下出現此問題的原因，以及解決方案。

首先看一段程式碼例項：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
*{
  margin:0;
  padding:0;
  border:0;
}
div {
  width:300px;
  height:50px;
  background:#ccc;
}
div:first-child{
  text-align:justify;
}
</style>
</head>
<body>
  <div>螞蟻部落歡迎您，本站的地址在山東省青島市南區福州路</div>
  <div>螞蟻部落歡迎您，本站的地址在山東省青島市南區福州路</div>
</body>
</html>

程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201901/21/010925pjdxysgdiwchwzuc.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

第一個div採用兩端對齊方式，第二個是預設。

可以看到第一個div實現了兩端對齊，第一行右側沒有空隙，第二個div第一行右側空隙明顯。

毫無疑問，justify屬性值生效了，但是很多時候，此屬性值並不生效，程式碼例項如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
*{
  margin:0;
  padding:0;
  border:0;
}
div {
  width:300px;
  height:50px;
  background:#ccc;
  text-align:justify;
}
</style>
</head>
<body>
  <div>螞蟻部落歡迎您，本站的地址青島市南區</div>
</body>
</html>

程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201901/21/011016cqxixstw1d1qwx1d.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

雖然為div元素設定了text-align:justify，但是並沒有實現兩端對齊效果。

因為此屬性值對於最後一行無效，單行文字雖然是第一行，但也是最後一行，所以不生效。

解決方案非常簡單，新增如下CSS屬性即可：

[CSS] 純文字檢視 複製程式碼
text-align-last: justify;

從屬性的名稱來看，它用來規定最後一行是否具有兩端對齊效果。

新增上述屬性之後，效果肯定是好用的，本文不再演示，但是有一個小的缺陷，那就是低版本IE瀏覽器不支援，雖然當前已不是什麼大問題，畢竟低版本IE使用者已經很少了， 如果想做到機智，那麼可以採用如下方式相容，程式碼修改如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
*{
  margin:0;
  padding:0;
  border:0;
}
div {
  width:300px;
  height:50px;
  background:#ccc;
  text-align:justify;
  text-align-last: justify;
}
div:after {
  content:'.';
  width: 100%;
  display: inline-block;
  overflow: hidden;
  height: 0;
}
</style>
</head>
<body>
  <div>螞蟻部落歡迎您，本站的地址青島市南區</div>
</body>
</html>

既然最後一行不生效，那麼我們通過偽元素選擇器:after再新增一行。

那麼原來的文字就不再是最後一行，於是實現了瀏覽器全相容效果。

此屬性在某些效果中非常好用，比如表單文字框前面的前面的名稱兩端對齊會更加美觀。

程式碼例項如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>螞蟻部落</title>
<style>
span{
  float: left;
  width: 100px;
  text-align: justify;
  text-align-last: justify;
}
input{
  width: 100px;
}
</style>
</head>
<body>
  <div>
    <span>姓名</span>：<input type="text"><br><br>
    <span>電子郵箱</span>：<input type="email">
  </div>
</body>
</html>

程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201901/21/011431ev5vzw5j4r8eq4qe.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

是不是實現上述效果曾經困擾過一些朋友，採用text-align:justify可以輕鬆實現。

原理前面已經介紹過了，如果有任何問題，可以在文章底部留言，本站會第一時間回覆。

相關文章