如何通過文本換行符保留div高度

Question

我正在嘗試顯示人們的名字。 問題在於這些名稱可能會變得很長，並且使用固定寬度的框，肯定會出現瘋狂。 較長的文本換行符，在新行上引起問題（ http://jsfiddle.net/9MhWW/ ），並用white-space: nowrap;禁用換行符white-space: nowrap; 將溢出該框（ http://jsfiddle.net/9MhWW/1/ ）。

使用換行符似乎是最好的選擇。 如果您同意，那么將提出以下問題：是否有一種方法可以確保在不丟失部分文本，每行有一個div或給段落固定高度的情況下不會出現行問題？

Answer 1

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

p { overflow: hidden; }

一個很好的效果是使用省略號將溢出的文本替換為... ：

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

看到這個更新到您的小提琴 。

Answer 2

我想我已經提出了一個解決方案。 因此，引導程序會添加很多東西以使其看起來不錯，但是在您的情況下，我們必須撤消其中的一些操作。 因此，我們必須擺脫浮點數，並用display inline-block替換它：

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

參見小提琴更新 。 我必須更改文本對齊方式以匹配您以前的內容。