如何通过文本换行符保留div高度

Question

I'm trying to show boxes of people's names. The problem is that these names can get pretty long, and with a fixed width box, crazyness is sure to ensue. Long spaced text breaks, causing problems on new rows ( http://jsfiddle.net/9MhWW/ ) and disabling line-breaks with white-space: nowrap; will overflow the box ( http://jsfiddle.net/9MhWW/1/ ).

Working with line breaks seem like the best option. If you agree, that begs the following question: Is there a way to make sure the row-problem doesn't occur without losing part of the text, having a div for every row or giving the paragraph a fixed height?

Answer 1

If just one row is ok for you, set a overflow: hidden :

p { overflow: hidden; }

A nice effect will be using ellipsis to replace the overflowing text with ... :

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

See this update to your fiddle .

Answer 2

I think I have come up with a solution. So bootstrap adds loads of stuff in to make it look nice of course, but in your case we have to undo some of that. So we have to get rid of the float left and replace it with display inline-block:

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

See the fiddle update . I had to change the text alignment to match what you had previously.