CSS text-overflow
This CSS property representation of the text content will be displayed when it overflows the block container element that has overflow other than visible.
Syntax:
text-overflow: clip | ellipsis | string | initial | inherit
Property Values:
⦁ clip: It is the default value and that clips the overflowed text.
⦁ ellipsis: This value displays an ellipsis (?) or three dots to show the clipped text.
It is displayed within the area and decreasing the amount of text.
⦁ string: The user using the string of the programmer’s choice. It works only in the
Firefox browser.
⦁ initial: It sets the property to its default value.
⦁ inherit: It inherits the property from its parent element.
Example:
<!DOCTYPE html> <html> <head> <style> div{ white-space: nowrap; height: 30px; width: 250px; overflow: hidden; border: 2px solid black; font-size: 25px; } .itu{ text-overflow: clip; } .itu1 { text-overflow: ellipsis; } h2{ color: blue; } div:hover { overflow: visible; } p{ font-size: 25px; font-weight: bold; color: pink; } </style> </head> <center> <body> <p>Over the bordered text to see the full content. </p> <h2> text-overflow: clip; </h2> <div class="itu"> Welcome to the I2Tutorials </div> <h2> text-overflow: ellipsis; </h2> <div class="itu1"> Welcome to the I2Tutorials</div> </center> </body> </html>
OUTPUT: