Wrap a text within only two lines inside div

Question

I want to wrap a text within only two lines inside div of specific width. If text goes beyond the length of two lines then I want to show elipses. Is there a way to do that

Answer 1

CSS only solution for Webkit

// Only for DEMO
$(function() {

  $('#toggleWidth').on('click', function(e) {

    $('.multiLineLabel').toggleClass('maxWidth');

  });

})

.multiLineLabel {
  display: inline-block;
  box-sizing: border-box;
  white-space: pre-line;
  word-wrap: break-word;
}

.multiLineLabel .textMaxLine {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}


/* Only for DEMO */

.multiLineLabel.maxWidth {
  width: 100px;
}

  This text is going to wrap automatically in 2 lines in case the width of the element is not sufficiently wide.



Toggle Width