Skip to content
Related Articles

Related Articles

Improve Article
Tailwind CSS Text Overflow
  • Last Updated : 22 Feb, 2021

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




My Personal Notes arrow_drop_up
Recommended Articles
Page :