Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Handling Text Overflow in CSS3
The text-overflow property is used in CSS3 to determine how overflowed content that is not displayed is signalled to users.
Syntax
The following is the syntax of the text-overflow property −
text-overflow: value;
The value can be clip, ellipsis, string, and initial. You can set any text using the string value. The ("...") t is shown for the clipped text when the ellipsis value is used.
The following is the code for handling text overflow in CSS3 −
Clip the Text
In this example, the overflow text is clipped and cannot be accessed using the text-overflow property with the value clip −
.clip {
text-overflow: clip;
}
Example
Let us see an example −
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
div {
white-space: nowrap;
width: 100px;
overflow: hidden;
border: 1px solid #3008c0;
margin: 10px;
padding: 10px;
}
.clip {
text-overflow: clip;
}
</style>
</head>
<body>
<h1>Handling text overflow (clip)</h1>
<div class="clip">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Rerum, beatae.
</div>
</body>
</html>
Represent the Clipped Text With Ellipsis
In this example, the overflow text is clipped and cannot be accessed using the text-overflow property with the value ellipsis −
.clip {
text-overflow: ellipsis;
}
Example
Let us see the example −
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
div {
white-space: nowrap;
width: 100px;
overflow: hidden;
border: 1px solid #3008c0;
margin: 10px;
padding: 10px;
}
.ellipsis {
text-overflow: ellipsis;
}
</style>
</head>
<body>
<h1>Handling text overflow example (ellipsis)</h1>
<div class="ellipsis">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Rerum, beatae.
</div>
</body>
</html>
Represent the Clipped Text With any String
In this example, the overflow text is clipped and cannot be accessed using the text-overflow property with the value ellipsis −
.clip {
text-overflow: " [..]";
}
Example
Let us see the example −
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
div {
white-space: nowrap;
width: 100px;
overflow: hidden;
border: 1px solid #3008c0;
margin: 10px;
padding: 10px;
}
.myStr {
text-overflow: " [..]";
}
</style>
</head>
<body>
<h1>Handling text overflow example (string)</h1>
<div class="myStr">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Rerum, beatae.
</div>
</body>
</html>
205 Views
