CODEWITHSUNDEEP
htmlcss
belens
belens

Reputation: 962

How to preserve div height with text line-breaks

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?

Upvotes: 0

Views: 2302

Answers (2)

Martyn0627
Martyn0627

Reputation: 739

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.

Upvotes: 1

Linus Caldwell
Linus Caldwell

Reputation: 11058

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.

Upvotes: 2

Related Questions