Cross-browser multi-line text overflow with ellipsis appended within a fixed width and height

Question

I made an image for this question to make it easier to understand.

Is it possible to create an ellipsis on a

with a fixed width and multiple

Answer 1

I have made a version that leaves the html intact. jsfiddle example

jQuery

function shorten_text_to_parent_size(text_elem) {
  textContainerHeight = text_elem.parent().height();


  while (text_elem.outerHeight(true) > textContainerHeight) {
    text_elem.html(function (index, text) {
      return text.replace(/(?!(<[^>]*>))\W*\s(\S)*$/, '...');
    });

  }
}

$('.ellipsis_multiline').each(function () {
  shorten_text_to_parent_size($(this))
});

CSS

.ellipsis_multiline_box {
  position: relative;
  overflow-y: hidden;
  text-overflow: ellipsis;
}

jsfiddle example