Using Text-overflow property in CSS

This article deals with text overflow property of CSS and more emphasis is on ellipsis values over the other values.

When the content overflows the container box, it has to be either accommodated in any way or clipped out of container box and should be represented to the user that overflowed content is clipped.

It can be shown like visible overflow, clipped, ellipsis or custom string.
Text overflow can be applied only for block level container elements as it makes sense only when the word/s being long to fit into the container.
To apply text overflow we need to apply overflow :  hidden or scroll or auto property.

Overflow: clip is the default value.

text-overflow:  clip;

This specification clips the content at the limit of the container area. So the truncation may happen at the middle of the character. Inorder to avoid that we need to add an empty string value (‘’).

Text-overflow : ellipsis;

It is the property wherein three consecutive dots are used to represent a clipped text. Ellipsis is displayed within the content area.

• Css property white-space : no-wrap should also be apllied along with the text overflow property
• Width property should take a value in pixels and not in percentages for consistency.
• Actual content display property is inline annd not block element, then it may not work.

#ellipsis-content{
    width:200px;
    text-overflow:ellipsis;
    white-space:no-wrap;
    overflow:hidden;
  }

Text-overflow property is well supported by mordern browsers. Refer caniuse.com



You may also read Are you using favicons in your website?