How to italicize text in CSS ?

How to Apply an Ellipsis to Multiline Text in CSS ?

Last Updated : 16 May, 2025

In web design, showing only part of a long paragraph is a common need — especially when space is limited. While many developers know how to add an ellipsis (...) to a single line, about 80% are unsure how to do it for multiple lines. This article will show you how to apply an ellipsis to multiline text in CSS in a simple and clear way.

Here are three methods to apply an ellipsis to multiline text using CSS:

1. Using -webkit-line-clamp

The -webkit-line-clamp property is a convenient way to limit text to a specific number of lines and add an ellipsis.

HTML

<!--Driver Code Starts-->
<html>
<head>
    <style>
<!--Driver Code Ends-->

        .clamp {
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 3;
            overflow: hidden;
        }
    </style>

<!--Driver Code Starts-->
</head>
<body>
    <div class="clamp">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    </div>
</body>
</html>

<!--Driver Code Ends-->

The -webkit-line-clamp: 3 limits the text to three lines and truncates the rest.
overflow: hidden ensures that overflowing text is not displayed.

2. Using max-height and overflow

You can use max-height combined with line-height to limit the visible lines.

HTML

<html>
<head>
    <style>
        .truncate {
            overflow: hidden;
            text-overflow: ellipsis;
            display: block;
            line-height: 1.5em;
            max-height: 4.5em; /* 3 lines * line-height */
        }
    </style>
</head>
<body>
    <div class="truncate">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
      Vivamus lacinia odio vitae vestibulum. Fusce volutpat odio nec luctus dapibus. 
      Praesent a vehicula sapien, ac feugiat nisl. Integer accumsan turpis at ligula fermentum.
    </div>
</body>
</html>

line-height defines the height of a single line.
max-height ensures only a specific number of lines are displayed.

3. Using JavaScript for Browser Compatibility

For broader compatibility, JavaScript can dynamically limit the text and add an ellipsis.

HTML

<html>
<head>
    <style>
        .js-truncate {
            overflow: hidden;
            text-overflow: ellipsis;
            display: block;
        }
    </style>
    <script>
        function truncateText(selector, lines) {
            const element = document.querySelector(selector);
            const lineHeight = parseFloat(getComputedStyle(element).lineHeight);
            element.style.maxHeight = `${lineHeight * lines}px`;
        }
        window.onload = () => truncateText('.js-truncate', 3);
    </script>
</head>
<body>
    <div class="js-truncate">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
      Vivamus lacinia odio vitae vestibulum. Fusce volutpat odio nec luctus dapibus. 
      Praesent a vehicula sapien, ac feugiat nisl. Integer accumsan turpis at ligula fermentum.
    </div>
</body>
</html>

JavaScript calculates the height dynamically based on the line count and applies it as a max-height.
This approach works in browsers without support for -webkit-line-clamp.

Note: It is ideal for browsers like firefox and IE that don't support -webkit-line-clamp, this method takes more effort but offers the best compatiblity and flexiblity.

Additional Notes:

Always test on multiple browsers to ensure proper behavior.
Keep responsive design in mind—multiline ellipsis may look different on mobile vs. desktop.
If content is hidden with ellipsis, consider adding a “Read more” or expand option for accessibility.
Avoid using ellipsis to hide critical information (like prices, errors, or links).
Use CSS gracefully—not every situation needs text to be trimmed.

How to italicize text in CSS ?

T

triashabiswas

Improve

Article Tags :

Similar Reads

How to Avoid CSS text-overflow to Ellipsis?

The CSS text-overflow: ellipsis property is used to truncate text and display an ellipsis at the end of the text when it overflows its container. However, there may be cases where you want to avoid using this property. Fortunately, there are several approaches you can take to achieve this.Table of C

How to Add Text Outline with CSS?

Since CSS does not provide a direct text-outline property, the CSS text-shadow property is used to create an outline effect around text by adding multiple shadows with offsets.1. Using text-shadow PropertyThe text-shadow property is commonly used to add shadows to text, by applying multiple shadows

How to add line breaks to an HTML textarea?

Line breaks in an HTML textarea refer to the inclusion of newline characters (\n) that separate lines of text within the textarea. When users press Enter or Return, a line break is created, making text easier to read and format within the form element.The way of implementing line breaks differs from

How to use text-overflow in a table cell ?

In this article, we will see how to use text-overflow in a table cell. A text-overflow property in CSS is used to specify that some text has overflown and hidden from view. Approach: The white-space property must be set to "nowrap" and the overflow property must be set to "hidden". The overflowing c

How to italicize text in CSS ?

Here are the approaches to italicize text in CSS: Using the font-style PropertyThe CSS font-style property is the most straightforward way to italicize text.HTML<html> <head> <style> .italic-text { font-style: italic; } </style> </head> <body> <p class="italic-

How to create a multiline input control text area in HTML5 ?

The HTML <textarea> tag is used to specify a multiline input control text area in HTML5. Â The <cols> and <rows> attributes specify size of a textarea. Syntax <textarea rows="" cols=""> Contents... </textarea> The <textarea> tag contains 5 attributes that are liste

How to Creating Horizontal Rule Divider with Text in Tailwind CSS ?

In this article, we will understand how to create a horizontal rule (HR) divider that contains text with Tailwind CSS. The problem here is that in an HR, there is no text, & only a divider is visible, and there is no default method to add text in Tailwind CSS. Tailwind CSS is a highly customizab

How to create linear gradient text using HTML and CSS ?

The linear-gradient is used to create eye-catching text effects, particularly suitable for dark-themed websites or applications. This method involves filling text with linear-gradient color codes, making it look attractive and bold. Linear-gradient text effects are ideal for dark themes and provide

How to Apply Shadow Effect on Text Using CSS?

The CSS text-shadow property is used to add a shadow to the text.Adding a shadow to text using CSS text-shadowThe text-shadow property of CSS is used to apply the shadow effect on text. It takes four values verticalShadow, horizontalShadow, blur, and color.Syntaxtext-shadow: verticalShadow horizonta

How to wrap a text in a <pre> tag using CSS ?

In this article, we will learn how to wrap a text in a <pre> tag. The <pre> tag is used to display the block of preformatted text which preserves the text spaces, line breaks, tabs, and other formatting characters which are ignored by web browsers. By default, the <pre> tag does no