Code Example: Line Clamping with Ellipsis Documentation

Code Example: Line Clamping with Ellipsis

If you want to have multiple lines of text that end in an ellipsis, use the below code example:

<html>
  <body>
    <style>
      p {
        font-size : 26px;
        font-family: serif;
      }

      /* Begin required CSS. */
      .line-clamp {
        display            : block;
        display            : -webkit-box;
        -webkit-box-orient : vertical;
        position           : relative;
   
        line-height        : 1.2;
        overflow           : hidden;
        text-overflow      : ellipsis;
        padding            : 0 !important;
      }

      .line-clamp:after {
        content    : '...';
        text-align : right;
        bottom     : 0;
        right      : 0;
        width      : 25%;
        display    : block;
        position   : absolute;
        height     : 1.2em;
      }

      .line-clamp-1 {
        -webkit-line-clamp : 1;
        height             : 1.2em;
      }
  
      .line-clamp-2
      {
	    height             : 2.4em;
      }
      .line-clamp-3
      {
	    -webkit-line-clamp : 3;
	    height             : 3.6em;
      }
      .line-clamp-4
      {
	    -webkit-line-clamp : 4;
	    height             : 4.8em;
      }
      .line-clamp-5
      {
	    -webkit-line-clamp : 5;
	    height             : 6em;
      }
      /* End required CSS. */
    </style>
    <p class="line-clamp line-clamp-4">This is a cross-browser solution that will clamp text to X number of lines with a trailing ellipsis in Webkit browsers. The `height` property is used on other browsers (along with a fading text effect) as a graceful fallback in non-Webkit browsers. The use of CSS `calc` allows for any font-size to work properly; i.e. you don't need a fixed height or a fixed font size for this to work! Play with it :-) You can change the second class to `line-clamp-[1|2|3|4|5]` and experiment with this just a little.</p>
  </body>
</html>

Code Example: Line Clamping with Ellipsis

Ready to get started? Try DocRaptor for free with unlimited test documents.