Trim Multiline Text

Introduction

In this lab, we will explore the use of CSS to trim multiline text to a specified number of lines. By using the -webkit-line-clamp property and other related CSS properties, we can effectively limit the number of lines displayed in a block of text, making it more visually appealing and easier to read. Through this lab, you will learn how to implement this technique in your web design projects.

Skills Graph

Trim Multiline Text

You can write the code in index.html and style.css..

Limit multiline text to a given number of lines.

• Use -webkit-line-clamp to set the maximum number of lines to be displayed.
• Set display to -webkit-box and -webkit-box-orient to vertical, as they are required for -webkit-line-clamp to be applied.
• Apply overflow: hidden to hide any overflow after the text is trimmed.

<p class="excerpt">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec euismod enim
  eget ultricies sollicitudin. Nunc aliquam arcu arcu, non suscipit metus luctus
  id. Aliquam sodales turpis ipsum, in vehicula dui tempor sit amet. Nullam quis
  urna erat. Pellentesque mattis dolor purus. Aliquam nisl urna, tempor a
  euismod a, placerat in mauris. Phasellus neque quam, dapibus quis nunc at,
  feugiat suscipit tortor. Duis vel posuere dolor. Phasellus risus erat,
  lobortis et mi vel, viverra faucibus lectus. Etiam ut posuere sapien. Nulla
  ultrices dui turpis, interdum consectetur urna tempus at.
</p>

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

Summary

Congratulations! You have completed the Trim Multiline Text lab. You can practice more labs in LabEx to improve your skills.