Fandom

HTML & CSS Wiki

Text-overflow

649pages on
this wiki
Add New Page
Comments0 Share

The CSS text-overflow property is used because some content in an element may fall outside the element's rendering box for a number of reasons (negative margins, absolute positioning, content exceeding the width/height set for an element, etc). In cases where this occurs, the overflow (set to hidden or scroll for this property to have an effect), and clip properties define what content will be visible.

If text is too long for the overflow/clipping area and the content is to be visually clipped, this property allows the clipped content to be visually represented by ... (called an "ellipsis") in the non-clipped area.

This property only applies to text overflow content in the flow of text (horizontal for western text). To explicitly force an overflow situation, content must be in an element with the white-space property set to nowrap - otherwise, only a natural non-breaking word existing at the clipping boundary will induce this property to have an ellipsis effect (if the property is thus set).

The clipped content can still be selected by selecting the ellipsis. When selected, the ellipsis will disappear and be visually replaced by as much of the the text content as is possible to display in the clipping area.

Values

Value Description
clip Clips the viewable content to the area defined by the rendering box, the overflow, and clip property values.
ellipsis If text content will overflow, it displays ... in the visibly-rendered region for content outside the visible area.


HTML example:

<div style="position:absolute; left:20px; top:50px; width:120px; height:50px;
border:thin solid black; overflow:hidden; text-overflow:ellipsis;">TEXT</div>


CSS example:

div {
     position:absolute; 
     left:20px; 
     top:50px;
     width:120px;
     height:50px;
     border:thin solid black;
     overflow:hidden;
     text-overflow:ellipsis;
}

Ad blocker interference detected!


Wikia is a free-to-use site that makes money from advertising. We have a modified experience for viewers using ad blockers

Wikia is not accessible if you’ve made further modifications. Remove the custom ad blocker rule(s) and the page will load as expected.