如何設計HTML元素以避免懸掛文字？

我正在創建一個頁面，其中有一個文本框顯示來自數據庫的文本字符串，並且其長度各不相同。正因爲如此，一些字符串恰好是足夠長的時間來運行到兩條線，但第二行是短暫的，而這並不好看：如何設計HTML元素以避免懸掛文字？

enter image description here

這裏的藍色框顯示了包含div內容。它有一個固定的寬度（容器的80％）和text-align:center。

所以我的問題是：如何讓文本流入線寬相近的線？我願意做一些數學計算並動態調整寬度或字體大小，但我不確定如何可靠地做到這一點。

如果你這樣做不需要文本包裝在所有你可以使用'white-space：nowrap'風格 –

@PatrickEvans會導致溢出.. –

@Joshua你是什麼意思的「線寬彼此更接近」？ –

您需要JavaScript才能做到這一點。如果您使用動態文本，CSS本身無法解決此問題。

一旦您檢測到盒子的高度超出一行的限制，您可以縮小字體，擴大方框或計算中點以添加中斷並且有兩條平衡線。

下面是各種jQuery插件，爲你做這個。如果你看，有很多。

2014-04-03 17:57:26

-1

我個人不喜歡使用JavaScript 「簡單的事情」

您使用以下屬性

overflow 
white-space

2014-04-03 18:05:52

實際上並沒有解決問題。 – Nit

回答