A Pen by Barney Carroll.

index.html

<input type="checkbox" class="clamp-toggle" id="clamp-toggle-1"/>
<p class="ellipsis-container clamped clamped-2">
  <label class="ellipsis" for="clamp-toggle-1">
    Boxes with ellipses (...) can be clicked to reveal more.
  </label>
</p>
<input type="checkbox" class="clamp-toggle" id="clamp-toggle-2"/>
<p class="ellipsis-container clamped clamped-4">
  <label class="ellipsis" for="clamp-toggle-2">
    But more text here (the same markup structure though): if the text overflows from the clamped paragraph's height, the ellipse will show.<br/>
    But wait &#8212; there's more. These .ellipsis-container elements are preceded by checkboxes of class .clamp-toggle: by making the .ellipsis wrapper inside them a &lt;label&gt; for that input, we can click the content to toggle the ellipsis overflow.
  </label>
</p>

Multiline-ellipsis.markdown

Multiline ellipsis

Using one wrapping element, create multiline ellipses such that a '...' appears when text is overflown.

This particular example shows how it can be used in conjunction with complex effects like zebra-striping by using fixed background images and strict vertical rhythm.

It also implements a system of hidden checkboxes mapped to ellipsis text as labels to enable a 'click to expand' mechanism.

A Pen by Barney Carroll on CodePen.

License.

style.css

/* The ellipsis classes reveal a '...' if there is more content that isn't being displayed */

/* The ellipsis-container class adds padding to the container to stop the ellipsis clipping text */
.ellipsis-container {
  position: relative;
  padding-right: 1em;
}

.ellipsis {
  background: inherit;
  display: inline;
}

.ellipsis:before,
.ellipsis:after {
  background: inherit;
  position: absolute;
}

.ellipsis:before {
  content: '\2026';
  bottom: 0;
  opacity: 1;
  right: 0;
  transition: .6s ease-in-out .3s;
  visibility: visible;
}

.clamp-toggle:not( :checked ) + .ellipsis-container:hover > .ellipsis:before {
  background: #fefefe;
  color: #444;
  padding: 0 .5em;
}

:nth-child(n):nth-child(n) .clamp-toggle:checked + .ellipsis-container > .ellipsis:before {
  background: #fefefe;
  opacity: 0;
  visibility: hidden;
  z-index: 1;
}

.ellipsis:after {
  content: '';
  height: 100%;
  width: 100%;
}

/* Clamping is just a mechanism to limit the number of lines that can be displayed in a container */
.clamped {
  line-height: 1.5;
  overflow: hidden;
}

.clamped-2 {
  /* Clamp to 2 lines, ie line-height x 2: */
  max-height: 3em;
}

.clamped-3 {
  max-height: 4.5em;
}

.clamped-4 {
  max-height: 6em;
}

.clamp-toggle {
  display: none;
}

.clamp-toggle:checked + .clamped {
  max-height: none;
}

/* Generic styles */
body {
  background: #cfdbec;
  color: #cfdbec;
  font: 12px/1.5 Consolas, monospace;
  margin: 0;
}

p {
  /* This background image causes zebra striping. It happens to be 36px high, ie twice the line height ( 12px * 1.5 * 2 ). Background-sizing may be necessary. */
  background-image: url(data:image/gif;base64,R0lGODlhAQAkAIAAAERERC8vLyH5BAAAAAAALAAAAAABACQAAAIHhI95we3fCgA7);
  /* This part is essential to keep the ellipsis bits in sync */
  background-attachment: fixed;
  border: 1.5em solid #2f2f2f;
  /* Keeping a tight vertical rythm (everything in multiples of 1.5em) makes sure the background image will always align */
  margin: 1.5em 0;
}