text-align:justify用法詳解

admin發表於2017-04-01

對於text-align:center這類的屬性值大家司空見慣，也比較容易理解，還有一個比較常用的屬性值justify，可能很多朋友就不是太理解了，下面就通過程式碼例項對其做一下簡單介紹。

text-align:justify能夠實現文字兩端對齊效果，程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>螞蟻部落</title> 
<style type="text/css">
div {
  width:240px;
  height:300px;
  background:#ccc;
}
</style>
<script>
window.onload = function () {
  var odiv = document.getElementsByTagName("div")[0];
  var obt = document.getElementById("bt");
  obt.onclick = function () {
    odiv.style.textAlign = "justify";
  }
}
</script>
</head>
<body>
<div>螞蟻部落歡迎您，只有努力奮鬥才會有美好的未來。本站的url地址是softwhy.com,歡迎大家為本站提供有益的建議或者意見.</div>
<input type="button" id="bt" value="檢視效果"/>
</body>
</html>

上面的程式碼點選能夠實現第二行兩端對齊，程式碼非常的簡單不多介紹了，下面介紹一下此屬性值的作用原理:

text-align:justify是通過拉伸文字之間的空格來實現兩端對齊的。

特別說明:拉伸的是空格，文字是不會被拉伸的。

相關文章