html - 如何使用文本换行符保留 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; }

请参阅您的小提琴的此更新。

Answer 2

我想我已经想出了一个解决方案。所以 bootstrap 添加了很多东西来让它看起来不错，但是在你的情况下，我们必须撤消其中的一些。所以我们必须去掉左边的浮动并用显示内联块替换它：

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

请参阅小提琴更新。我不得不更改文本对齐方式以匹配您之前的对齐方式。