The text-overflow CSS property determines how overflowed content that is not displayed is signaled to the users. It can be clipped, display an ellipsis (Horizontal Ellipsis) or a Web author-defined string.
<!DOCTYPE html> <html> <head> <style> div.test { white-space: nowrap; width: 12em; overflow: hidden; border: 1px solid #000000; } </style> </head> <body> <p> The following two divs contains a long text that will not fit in the box. As you can see, the text is clipped. </p> <p> This div uses "text-overflow:ellipsis": </p> <div class="test" style="text-overflow:ellipsis;"> This is some long text that will not fit in the box </div> <p> This div uses "text-overflow:clip": </p> <div class="test" style="text-overflow:clip;"> This is some long text that will not fit in the box </div> </body> </html>