Multiline text with ellipsis Supported IE and Firefox

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="style.css">
  </head>

  <body>
    <div class="container">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati, voluptatibus, officiis debitis neque accusamus iure repudiandae voluptate reiciendis facere voluptates ipsum ipsam soluta ullam fugit minus harum esse corrupti aut.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati, voluptatibus, officiis debitis neque accusamus iure repudiandae voluptate reiciendis facere voluptates ipsum ipsam soluta ullam fugit minus harum esse corrupti aut.</p>
    </div>
  </body>
</html>

// Variables
$container-bg: #eee;
$font-size-base: 14px;
$line-height-computed: 1.4;
$lines-to-show: 3;

// Reset
p {
  margin: 0;
}

// Multiline text with ellipsis
// Supported IE and Firefox
.container {
  background: #eee;
  overflow: hidden;
  width: 100%;
  p {
    font-size: $font-size-base;
    height: $font-size-base * $line-height-computed * $lines-to-show;
    line-height: $line-height-computed;
    position: relative;
    &:before,
    &:after {
      background: #eee;
      position: absolute;
    }
    &:before {
      content: "...";
      top: $font-size-base * $line-height-computed * ($lines-to-show - 1);
      right: 0;
    }
    &:after {
      content: "";
      height: 100%;
      width: 100%;
    }
  }
}