text-clamp

index.html

<div class="wrapper">
  <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sint quas aliquid in nesciunt eveniet alias quis aspernatur dicta! Ad eos, asperiores, at, veritatis dolores ullam officia impedit facilis ab velit aut excepturi voluptate fugiat quidem est quod dolor ducimus. Facilis nobis sed et omnis incidunt tenetur hic possimus quae quaerat itaque quas iure cupiditate, odit impedit. Quaerat, aliquam? Eaque odio accusamus minima vel molestias, illo ab dolorem. Soluta ab numquam ea temporibus voluptas eos amet blanditiis, in quaerat repudiandae distinctio eum quasi inventore provident vel at voluptate commodi molestias nisi consequatur. Fugiat, hic modi. Iste dolor velit in cum assumenda?</p>
  <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Porro vel quas quo nemo maiores labore atque harum itaque placeat repellat. Aliquam expedita alias vel quas fuga quod quos debitis cum labore possimus ipsum, maiores nisi dolor beatae animi voluptatibus cumque veritatis velit, laborum iure sed. Ipsum id quidem odit saepe!</p>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta dignissimos adipisci eum. Recusandae quos odio omnis? Excepturi eaque corrupti aliquam quo corporis suscipit quaerat accusantium. Sed, facilis ullam. Inventore fugiat vero aperiam! Cum, quae totam sequi ab facere molestias, illum mollitia, distinctio dolorum vitae temporibus quisquam tempore reprehenderit. Optio id praesentium quis modi nemo, velit nisi natus? Repellat repellendus, sit ab consectetur optio doloremque ea laboriosam vitae voluptatibus sed inventore cumque rem ipsa corporis saepe deleniti. Possimus omnis exercitationem hic ad tempora excepturi maxime dolores officiis praesentium sed modi architecto nostrum non, vitae ea quod ipsa sit eligendi laborum. Dolorem voluptas nobis hic aliquam beatae sapiente ducimus rerum at voluptatum, molestiae cum corporis accusantium, tenetur perspiciatis ipsa? Nisi, voluptates aliquam qui harum officia consectetur amet modi omnis, minima itaque adipisci earum. Eaque hic cupiditate reprehenderit dolorem eos quo odio incidunt, modi ipsum excepturi consectetur possimus tempora suscipit perspiciatis nostrum totam? Atque, officia! Ab maiores odio architecto fugiat deserunt sunt, itaque voluptatibus blanditiis rem obcaecati rerum cumque quae numquam possimus, ipsa ex eligendi voluptate repellat veniam expedita corrupti. Non nobis blanditiis sapiente itaque saepe animi unde, dolores amet provident, quisquam harum consectetur perspiciatis necessitatibus, eius et corrupti velit maiores iure quae?</p>
</div>

style.scss

@mixin textclamp($num_of_lines: 1, $line_height: 1.2) {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: $num_of_lines;
  line-height: $line_height;
  max-height: $line_height * $num_of_lines * 1em;
}

p {
  @include textclamp();
}

p:nth-of-type(2) {
  @include textclamp($num_of_lines: 3);
}

p:nth-of-type(3) {
  @include textclamp($num_of_lines: 5);
}

// =====================
.wrapper {
  max-width: 800px;
  margin: 60px auto;
}

html {
  font-size: 16px;
}
body {
  font-family: sans-serif;
}

text-clamp.markdown

text-clamp

A Pen by Jens Grochtdreis on CodePen.

License.