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=
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=
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=
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
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...