Is there any way that instead of text being cut out, there is automatically a line break added if it exceeds certain width.Like if the text is.eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeit becomes somethign like.eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeThe objective is to display the whole text but the text can be without line break and in that case i would like that a line break be added automatically if the text exceeds certain width.Thanking in anticipation.
Thanks for the replies. Bogbrushian, sure going pure CSS would be nice, but what I didn't mention was that this is only part of a much larger system.
I'm stuck with the table-based layout. I essentially have a case where the text that is being entered into the TDs is longer than expected, distorting the layout, so I would like to truncate the text at the point where it no longer affects the table layout. Make sense?coothead, I downloaded and played around with your code, and while it makes perfect sense, it doesn't address my particular issue - I believe. This is because you are still using a hardcoded value for the width (i.e.
Techniques how to use ellipsis in table columns. Later you’ll learn techniques how to use ellipsis in fixed-width or max-width table columns using HTML and CSS. Or a table cell. Also, it should be accompanied by the overflow: hidden CSS instruction. This is an indication to the browser that under no circumstances you want. This is doubtlessly too late, but I sure would have appreciated an answer to this thread last week, so here’s what I figured out. I was never able to get it working with 100% width in its containing element, but things went pretty easy once I switched to vw units (a unit that is 1% the size of the viewport). If you’re aiming to do the full width of the viewport anyway, 100vw is a fine.
200px on the cell and cell.div). I want the cell width to be a proportional value (e.g. 50%) and really the cell.div to fill up the entire cell, but not make it grow larger it would normally be (i.e. If it were empty, say).Any more ideas? Thanks in advance.
Actually, no, it's not quite what I was after, though I admit it's clever. Yours clips in the vertical direction, by using a fixed height. Although that is close, what I really want is the clipping to occur in the horizontal direction. I need the overflow to happen this way, because I want to use text-overflow:ellipsis to indicate to the user that the entire content is not being seen.Perhaps this is just not possible, alas. My first attempt (above) was to use white-space:nowrap to keep everything on one line, but I could not figure out how to tell the that it didn't have to stretch further.Oh well. Thanks everyone for your help nonetheless.