css如何實現中文兩端對齊

antzone發表於2017-04-02
CSS

實現中文兩端對齊，也是採用text-align:justify，當然我們需要做一些特別的設定才行。

關於text-align: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:230px;
  height:300px;
  background:#ccc;
}
</style>
</head>
<body>
<div>螞蟻部落歡迎您，只有努力奮鬥才會有美好的未來。本站的地址是歡迎大家為本站提供有益的建議或者意見.</div>
</body>
</html>

很明顯從上面的程式碼執行效果來看，右邊會有一定的空白，並沒有實現兩端對齊。

程式碼例項如下:

[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:230px;
  height:300px;
  background:#ccc;
  text-align:justify
}
</style>
</head>
<body>
<div>螞蟻部落歡迎您，只有努力奮鬥才會有美好的未來。本站的地址是歡迎大家為本站提供有益的建議或者意見.</div>
</body>
</html>

上面的程式碼實現了我們的要求，程式碼非常的簡單。

但是在低版本的IE瀏覽器中並不能夠實現我們的要求，解決此問題可以參閱相容IE瀏覽器實現的中文兩端對齊程式碼例項一章節，

相關文章