Css limit text to 3 lines

Example

Use of the text-overflow property:

Table of Contents Show

Definition and Usage
Browser Support
Property Values
More Examples
Related Pages
How do I limit text lines in CSS?
How do you show a 3 line paragraph in CSS?
How do I restrict text length in HTML?
How do I truncate text after two lines?

div {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

Try it Yourself »

More "Try it Yourself" examples below.

Definition and Usage

The text-overflow property specifies how overflowed content that is not displayed should be signaled to the user. It can be clipped, display an ellipsis (...), or display a custom string.

Both of the following properties are required for text-overflow:

white-space: nowrap;
overflow: hidden;

Show demo ❯

Default value:	clip
Inherited:	no
Animatable:	no. Read about animatable
Version:	CSS3
JavaScript syntax:	object.style.textOverflow="ellipsis" Try it

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Numbers followed by -o- specify the first version that worked with a prefix.

Property
text-overflow	4.0	6.0	7.0	3.1	11.0 9.0 -o-

CSS Syntax

text-overflow: clip|ellipsis|string|initial|inherit;

Property Values

Value	Description	Demo
clip	Default value. The text is clipped and not accessible	Demo ❯
ellipsis	Render an ellipsis ("...") to represent the clipped text	Demo ❯
string	Render the given string to represent the clipped text
initial	Sets this property to its default value. Read about initial
inherit	Inherits this property from its parent element. Read about inherit

More Examples

Example

Text-overflow with a hover effect (show entire text on hover):

div.a {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

div.a:hover {
overflow: visible;
}

Try it Yourself »

CSS tutorial: CSS Text Effects

HTML DOM reference: textOverflow property

Home » CSS

Using CSS, it is possible to limit the text length to N lines using CSS. This concept is known as line clamping or multiple line truncating. Here, we will learn how we can limit text length to n lines using the line-clamp property.
Submitted by Apurva Mathur, on May 25, 2022

The best solution to this problem is using the line-clamp property of CSS. The line-clamp property shortens text at a specific number of lines. It is defined as shorthand for max-lines and block-overflow.

Syntax:

.line {
  line-clamp: [none|<integer>];
}

The combination of line-clamp property with overflow-hidden value helps to limit the text length.

Lets us see via an example:

Example:

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8">
      <title>Title</title>
   </head>
   <style>
      .line {
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 1; /* number of lines to show */
      line-clamp: 1;
      -webkit-box-orient: vertical;
      }
      .block{
      height:40%;
      width:20%;
      background-color: #b3d4fc;
      }
   </style>
   <body>
      <div class="block">
         <h2>BLOCK</h2>
         <p class="line">You must be the change you wish to see in the world." - Gandhi. "Live for what's worth dying for, and leverage technology to create the world you wish to see</p>
      </div>
   </body>
</html>

Output:

As we can see the text line is limited to 1 in the example. If we want to change this limit we can directly do it by changing the following values according to our preference.

-webkit-line-clamp: 5;
line-clamp: 5;

Output: After replacing the values in the code

Note: -webkit-line-clamp, line-clamp the value which you are assigning should be the same for both.

CSS Tutorial & Examples »

How do I limit text lines in CSS?

The easiest way to limit text to n lines is to use line-clamp . N can be any positive number, but it will be two or three lines most of the time. On my blog, I'm using line-clamp in all post-type components to ensure that it will have the same height as siblings.

How do you show a 3 line paragraph in CSS?

“3 line show css” Code Answer's.

body {.

margin: 20px;.

. text {.

overflow: hidden;.

text-overflow: ellipsis;.

display: -webkit-box;.

How do I restrict text length in HTML?

You can specify a minimum length (in characters) for the entered value using the minlength attribute; similarly, use maxlength to set the maximum length of the entered value, in characters.

How do I truncate text after two lines?

2) Truncate text after multiple lines using line-clamp With line-clamp text can be truncated after multiple lines, whats even more interesting is you can truncate it by specifying the line number where you want to truncate it. eg: -webkit-line-clamp: 3; will truncate start truncating the text from the third line.