4

I have a div that doesn't have a fixed height, and has several <p> blocks as children. I've been trying to use text-overflow or line-clamp, but it seems like these don't apply to the children. This causes the text to sometimes be cut off in the middle. What I'm going to try is replacing the <p> blocks with <br>, but it seems like there should be a better way to do this. I also don't know the height until after the page has rendered, so I can't precompute anything in a template. Does anyone have a more sensible approach to this problem?

Edit: adding example

<div class="content">
<p>a big chunk of text</p>
<p>another chunk of text</p>
</div>

The css is something like

.content {text-overflow: ellipsis; overflow: hidden; -webkit-line-clamp: 2;}

I've tried different ways of mixing and matching this and still some of the <p> blocks will be cut off.

If this looks OK please let me know - someone suggested there could be some other css interfering? There is a lot of css on the page so this is possible.

Edit: Another clarification. The cutoff is a vertical one, not a horizontal. The text on the bottom gets cut off in the middle, or for example a character like a j or y will have the tail cut off.

V_H
  • 1,793
  • 3
  • 34
  • 59
  • Typically `

    ` should flow inside a `

    `, word wrapping as they go. Is there some funky CSS at work? Maybe floats?
     – Halcyon Apr 28 '11 at 20:05
  • sure, let me edit with an example – V_H Apr 28 '11 at 20:07
  • Yeah, wrapping is not the problem, sorry for the confusion: it's the bottom line of text that will get cut off in the middle. The text wraps correctly on the sides. – V_H Apr 28 '11 at 20:12
  • What do you expect to happen? – Herman Schaaf Apr 28 '11 at 20:14
  • I will accept any solution that will not cut off the text on the bottom. If that means blanking out a line or changing line height, or changing the size of the box somehow I am ok with that. – V_H Apr 28 '11 at 20:16
  • Is there a way to show us a live example so we can have a play with it in the debugger and see what's going on? It's hard to tell without seeing the whole css. – DarthJDG Apr 28 '11 at 21:13

1 Answers1

3

The text is getting cut in half horizontally due to the "overflow:hidden;", and the height of the div not being sufficient for the text content.

What is constraining the height of the div?

cwharris
  • 17,835
  • 4
  • 44
  • 64