如何使用文本換行符保留div高度

Question

我試圖顯示人名的框。 問題是這些名字可能會變得很長，並且在固定寬度的框中，瘋狂肯定會隨之而來。長間隔文本中斷，導致新行（http://jsfiddle.net/9MhWW/）出現問題，使用white-space: nowrap;禁用換行符會導致方塊溢出（http://jsfiddle.net/9MhWW/1/）。

使用換行符似乎是最佳選擇。如果您同意，那麼請回答以下問題：有沒有辦法確保行問題不會發生，而不會丟失部分文本，每行都有div或給段落固定的高度？

Answer 1

我想我已經想出了一個解決方案。因此，bootstrap會添加大量內容，當然它會讓您看起來不錯，但在您的情況下，我們必須撤消其中的一些內容。因此，我們必須擺脫左浮動的，並顯示inline-block的替換：

.span2{ 
    float: none !important; 
    display:inline-block; 
} 

見fiddle update。我不得不改變文字對齊以符合你以前的想法。

Answer 2

如果只有一個行對你合適，設置overflow: hidden：

p { overflow: hidden; } 

一個很好的效果將使用省略號來代替與...四溢的文字：

p { overflow: hidden; text-overflow: ellipsis; } 

看到這個update to your fiddle。