HTML-CSS: Trim multiline text

Last update on March 08 2024 13:34:41 (UTC/GMT +8 hours)

HTML-CSS : Exercise-44 with Solution

Using HTML, 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.

HTML Code:

<!--License: https://bit.ly/3GjrtVF-->
<!DOCTYPE html>
<html>
<head>
<!-- Set character encoding to UTF-8 -->
<meta charset="utf-8">
<!-- Ensure proper rendering on various devices by setting viewport width -->
<meta name="viewport" content="width=device-width">
<!-- Title of the webpage -->
<title>Using HTML, CSS limit multiline text to a given number of lines</title>
</head>
<body>
<!-- Paragraph with a class for limiting multiline text -->
<p class="excerpt">
<!-- Sample text longer than one line -->
   The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.
  The quick brown fox jumps over the lazy dog.
</p>
</body>
</html>

Explanation:

The HTML document starts with standard declaration tags including <!DOCTYPE html> which declares the document type and <html> which signifies the start of the HTML document.
Inside the <head> section:

<meta charset="utf-8"> sets the character encoding to UTF-8, ensuring proper interpretation of characters.
<meta name="viewport" content="width=device-width"> sets the viewport width to the width of the device, ensuring proper scaling on different devices.
<title>...</title> sets the title of the webpage which appears in the browser's title bar or tab.

The <body> section contains the content of the webpage.
<p class="excerpt"> defines a paragraph element with a class attribute set to "excerpt".
The paragraph contains sample text longer than one line, demonstrating the effect of limiting multiline text with CSS.

CSS Code:

/* CSS styles */
<style>
/* Style for limiting multiline text */
.excerpt {
  /* Display the element as a block-level element using -webkit-box */
  display: -webkit-box;
  /* Limit the number of displayed lines to 3 */
  -webkit-line-clamp: 3;
  /* Set the direction of the -webkit-box to vertical */
  -webkit-box-orient: vertical;
  /* Hide any content that overflows its container */
  overflow: hidden;
}
</style>

Explanation:

.excerpt class:

display: -webkit-box;: Uses the -webkit-box display mode which allows for the control of the number of lines displayed.
-webkit-line-clamp: 3;: Limits the number of displayed lines to 3. This property is specific to WebKit browsers like Safari and Chrome.
-webkit-box-orient: vertical;: Sets the direction of the -webkit-box to vertical, ensuring the text is truncated vertically.
overflow: hidden;: Hides any content that overflows its container, ensuring that only the specified number of lines are visible.

HTML-CSS Editor:

See the Pen html-css-practical-exercises by w3resource (@w3resource) on CodePen.