Difference between OVERFLOW and TEXT-OVERFLOW

Overflow and text-overflow both are different property and yet they are used to hide text inside the container with different uses.


Overflow property clip the text inside the defined dimension and hide rest outside of the area. If we set the height and width of the container as 200px and the content inside the container requires more width and height of already defined 200px, then the overflowed text will be hidden. Only the content of the container area that is of 200px dimension will be visible.

overflow and text-overflow


overflow: visible | hidden | scroll | auto | inherit

You can write separate X and Y values also.

overflow-x: [value];

overflow-y: [value];


The text-overflow property is used to hide the clipped text. It works on how you set the values. Text-overflow property only works with block level and inline-block level elements. There are some required fields to set the text-overflow feature.

Required Properties:

[overflow: hidden (Should not set visible)]
[white-space: nowrap]


June 11, 2017 by admin

Add a Comment

Your email address will not be published. Required fields are marked *