How to vertically clip text so it doesn't split a line in the middle

Question

I was wondering if there is some css/js magic that can prevent text from splitting vertically in the middle of a line. I'm using overflow:hidden in the below example. The text is not static ... it is rich-text entered by a user so I do not have control over the formatting.

i would like it to look like this:

Answer 1

Here's a possible example solution:

.dataTable td {
  /* essential */
  text-overflow: ellipsis;
  width: 200px;
  white-space: nowrap;
  overflow: hidden;

  /* for good looks */
  padding: 10px;
}

via http://davidwalsh.name/css-ellipsis

Solution example: http://jsfiddle.net/4Fpq2/

This should at least provide a starting point.

Also, here are some additional possible solutions:

• http://www.mobify.com/dev/multiline-ellipsis-in-pure-css
• http://softwareas.com/pure-css-solution-to-avoid-cutting-off-text

Answer 2

You can use wrapper div and multi-column css:

.wrapper {
    -webkit-column-width: 150px; //You can't use 100%
    column-width: 150px;
    height: 100%;
}

Solution example: http://jsfiddle.net/4Fpq2/9/