How to crop text (with an ellipsis) at the end of container [duplicate]

Question

I want to crop a text at the end of a container but not at the end of a line using css. Here is an example of what I want Example

Edit: What I already tried

overflow: hidden; <- to hide the overflowing text
white-space: nowrap; <- seems to be necessary but also seems to be part of the problem
text-overflow: ellipsis; <- should crop the text

Example of the current state

Answer 1

You need something called Line Clamping and it's available only in WebKit rendering engine. You just need to use the following CSS for the element that needs to get clamped at the end.

.line-clamp {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;  
}

Here, the value 3 is the number of lines you want to show before the clamping happens. An example to demonstrate the effect here:

p {
  overflow : hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

<p>
  WebKit Browsers will clamp the number of lines 
  in this paragraph to 2. Lorem ipsum dolor sit amet, 
  consectetur adipisicing elit, sed do eiusmod tempor 
  incididunt ut labore et dolore magna aliqua. Ut enim 
  ad minim veniam, quis nostrud exercitation ullamco 
  laboris nisi ut aliquip ex ea commodo consequat. Duis 
  aute irure dolor in reprehenderit in voluptate velit 
  esse cillum dolore eu fugiat nulla pariatur. Excepteur 
  sint occaecat cupidatat non proident, sunt in culpa qui 
  officia deserunt mollit anim id est laborum.
</p>

References:

• -webkit-line-clamp · dropshado.ws
• line-clamp | CSS-Tricks
• Line Clampin' (Truncating Multiple Line Text) | CSS-Tricks
• CSS Line-Clamp — The Good, the Bad and the Straight-up Broken

Note: None of the above links are mine. :)