balance-text (GitHub)
https://github.com/adobe-webplatform/balance-text
以下是示範的文字,將段落設定成置中對齊,因為寬度不足,所以「it so.」被擠到第二行,造成排版變得不好看:
<p style="text-align:center">There is nothing either good or bad, but thinking makes it so.</p>
使用 BalanceText 的方法:
- 必須有 jQuery library(建議版本 > 1.8.x):
在 </head> 之前加入:
<script type='text/javascript' src='http://code.jquery.com/jquery-1.8.3.js'></script> - 在 </body> 之前加入:
<script type='text/javascript' src="https://raw.github.com/adobe-webplatform/balance-text/master/jquery.balancetext.js"></script> - 加入 CSS 樣式定義:
.balance-text {
text-wrap: balanced;
} - 需要 BalanceText 處理的段落,加上 class="banalce-text"
<p style="text-align:center" class="balance-text">There is nothing either good or bad, but thinking makes it so.</p>
經過 BalaceText 的處理,置中換行的文字段落,每一行的寬度被調整到較相近,有更好的可讀性。
範例原始碼詳見:http://jsfiddle.net/lyhcode/daFdg/
參考:Balancing Text for better readability
沒有留言:
張貼留言