Open In App

Tailwind CSS Text Overflow

Last Updated : 22 Feb, 2021
Improve
Improve
Like Article
Like
Save
Share
Report

This class accepts more than one value in tailwind CSS. All the properties are covered in class form. It is the alternative to the CSS text-overflow property. This class is used to specify that some text has overflown and hidden from view. The whitespace class must be set to nowrap and the overflow class must be hidden.

 Text Overflow classes:

  • truncate
  • overflow-ellipsis 
  • overflow-clip 

truncate: It truncates the text.

Syntax:

<element class="truncate">...</element>

Example:

HTML




<!DOCTYPE html> 
<html>
<head
    <link href=
"https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" 
          rel="stylesheet"
</head
  
<body class="text-center mx-4 space-y-2"
    <h1 class="text-green-600 text-5xl font-bold">
        GeeksforGeeks
    </h1
    <b>Tailwind CSS Text Overflow Class</b
    <div class="mx-48 bg-green-200 p-2 rounded-lg">
    <p class="truncate whitespace-nowrap overflow-hidden"
        A Computer Science portal for Geeks, 
        this portal is the saviour of college 
        students
    </p>
   
    </div>
</body
  
</html


Output:

overflow-ellipsis: Text is clipped and the clipped text is represented as ‘…’ 

Syntax:

<element class="overflow-ellipsis">...</element>

Example:

HTML




<!DOCTYPE html> 
<html>
<head
    <link href=
"https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" 
          rel="stylesheet"
</head
  
<body class="text-center mx-4 space-y-2"
    <h1 class="text-green-600 text-5xl font-bold">
        GeeksforGeeks
    </h1
    <b>Tailwind CSS Text Overflow Class</b
    <div class="mx-48 bg-green-200 p-2 rounded-lg">
    <p class="overflow-ellipsis whitespace-nowrap overflow-hidden"
        A Computer Science portal for Geeks, 
        this portal is the saviour of college 
        students
    </p>
   
    </div>
</body
  
</html


Output:

overflow-clip: Text is clipped and cannot be seen. This is the default value.

Syntax:

<element class="overflow-clip">...</element>

Example:

HTML




<!DOCTYPE html> 
<html>
<head
    <link href=
"https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" 
          rel="stylesheet"
</head
  
<body class="text-center mx-4 space-y-2"
    <h1 class="text-green-600 text-5xl font-bold">
        GeeksforGeeks
    </h1
    <b>Tailwind CSS Text Overflow Class</b
    <div class="mx-48 bg-green-200 p-2 rounded-lg">
    <p class="overflow-clip whitespace-nowrap overflow-hidden"
        A Computer Science portal for Geeks, 
        this portal is the saviour of college 
        students
    </p>
   
    </div>
</body
  
</html


Output:

Text overflow class



Similar Reads

What is the difference between overflow: auto and overflow: scroll in CSS ?
In this article, we will understand the difference between the `scroll` &amp; `auto` values for the overflow CSS shorthand property. The Overflow property specifies the preferred behaviors for an element's overflow i.e., when the content of an element is too large to fit within its block formatting context in both directions. In simple words, it co
3 min read
CSS overflow-x: visible and overflow-y: hidden causing scrollbar issue
CSS overflow-x and overflow-y attributes are used to limit content overflow in the horizontal and vertical directions, respectively. The scrollbar may show on the page even when there is nothing to scroll when overflow-x is set to "visible" and overflow-y is set to "hidden". Syntax: For horizontal overflow:overflow-x: visible | hidden | scroll | au
2 min read
Tailwind CSS Overflow
This class accepts more than one value in Tailwind CSS. It is the alternative to the CSS Overflow property. This overflow is for controlling how an element content is handled that is too large for the container. It tells whether to clip content or to add scroll bars There is separate property in CSS for CSS Overflow-x and CSS Overflow-y, Overflow c
8 min read
How to use text overflow property in CSS ?
In this article, we will see how to set text overflow property in CSS. The text-overflow property is used to specify that some text has overflown and hidden from view from the user. The text-overflow property only affects content that is overflowing a block container element. Syntax: text-overflow: clip| ellipsis Property Value: clip: Text is clipp
2 min read
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. Approach 1: Using a Responsive Layout: One approach to avoi
4 min read
CSS text-overflow Property
The text-overflow property in CSS is your go-to feature when dealing with overflowing and hidden text. It works in tandem with the white-space property set to nowrap and the overflow property set to hidden. The overflowing content can be clipped, display an ellipsis (‘…’), or display a custom string. Syntax: text-overflow: clip|string|ellipsis|init
3 min read
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 content can be clipped, display an ellipsis (‘…’),
2 min read
Bootstrap 5 Text wrapping and overflow
Bootstrap 5 Text wrapping and overflow class is used to specify that the browser may break lines of text inside any targeted element to prevent overflow when the original string is too long to fit. Bootstrap 5 Text wrapping and overflow Classes: text-wrap: This class is used to wrap up the content.text-nowrap: This class is used to not wrap the ele
1 min read
What is the use of the tailwind.config.js file in Tailwind CSS ?
The tailwind.config.js file in Tailwind CSS serves as a central configuration hub for customizing the framework. It allows you to define colors, fonts, breakpoints, and more, tailoring Tailwind to fit your project's specific design and functionality requirements. Syntax:/** @type {import('tailwindcss').Config} */module.exports = { content: [], them
1 min read
CSS overflow-y Property
The overflow-y property of CSS specifies the behavior of content when it overflows a block-level element's top and bottom edges. The content may be clipped, hidden or a scrollbar may be displayed accordingly based on the value assigned to the overflow-y property. Syntax: overflow-y: scroll | hidden | visible | auto Property values: Scroll: If the v
5 min read