Truncating(Clip) Excess text with Ellipsis in HTML5

      Text-overflow property in CSS gives the way to deal with the clipped text when the actual text content size is exceed the container box.
      'text-overflow' css attribute allows the text to be clipped when its exceed the allowed display area by setting text-overflow value as ellipsis, it will display ellipsis( three periods) following the clipped text.

.cliptext 
       {
            color: #eee;
            border: 1px solid #000000;
            overflow: hidden;
            width: 100%;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

To get this ellipsis effect when the content fall outside the box you may need to set the boxs overflow property to hidden or scroll and white-space  property to  'nowrap'.

If you have any comments or suggestions in setting ellipsis please leave a comment.