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

Question

我正试图展示一些人的名字。 问题是，这些名称可能会变得很长，并且使用固定宽度的框，疯狂肯定会随之而来。较长的文本中断，导致新行（http://jsfiddle.net/9MhWW/）出现问题，并且white-space: nowrap;禁用换行符会溢出框（http://jsfiddle.net/9MhWW/1/）。

使用换行符似乎是最好的选择。如果您同意，那就引出以下问题：是否有办法确保在不丢失部分文本的情况下不会发生行问题，为每行设置一个div或者为段落指定固定高度？

Answer 1

如果只有一行可以，请设置overflow: hidden：

p { overflow: hidden; }

一个很好的效果是使用省略号将溢出的文本替换为...：

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

请参阅此update to your fiddle。

Answer 2

我想我已经找到了解决方案。所以bootstrap添加了大量的东西，当然它看起来不错，但在你的情况下，我们必须撤消其中的一些。所以我们必须摆脱左边的浮动并用显示内联块替换它：

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

请参阅fiddle update。我不得不更改文本对齐方式以匹配您之前的方式。