CSS TEXT-OVERFLOW
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 the string “…” (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 either a NOBR element or 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.
Example
| div { position: absolute; left: 20px; top: 50px; width: 120px; height: 50px; border: thin solid black; overflow: hidden; text-overflow: ellipsis }
<div style=”position: absolute; left: 20px; top: 50px; <nobr>This is a NOBR section</nobr> </div> |
Possible 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, display the string “…” in the visibly-rendered region for content outside the visible area. |
Your article is too hard to read – text is very small and not contrast. Increase size, please.
@Theo
Its fine, and if you want larger text press ctrl and +
Nicky V
@Nicky Vadera WOW, v2-webdesign FAIL. Typical web designer attituted…lol
I’m reading this just fine sitting half a metre away from the screen, the text is the default as far as I can tell.
Theo is likely, cough, older, ctrl + is intended for non-standard situations like that. There is nothing wrong with expecting those in the minority to use the tools designed for them.
A bit like the senior who complains about a website that doesn’t entry fit in his SVGA resolution, a resolution he is using because he is unaware or not bothering to use ctrl +.