CSS text-overflow Property

Description

The text-overflow property defines the visibility parameters of the text in the block, if the whole text does not fit in the specified area. Two options are possible: the text is truncated; the text is trimmed and an ellipsis is added to the end of the line. text-overflow works if the overflow property is set to auto , scroll or hidden for the block.

Initial value

clip

Applies to

Block containers

Inherited

No

Media

Visual

Computed value

As specified

Animatable

No

CSS Version

CSS3

JavaScript syntax

object.style.textOverflow

Syntax

text-overflow: ( clip | ellipsis | <string> ){1,2} | inherit 

Values

• clipClip inline content that overflows. Characters may be only partially rendered.
• ellipsisRender an ellipsis character (U+2026) to represent clipped inline content. Implementations may substitute a more language/script-appropriate ellipsis character, or three dots "..." if the ellipsis character is unavailable.
• <string>Render the given string to represent clipped inline content. The given string is treated as an independent paragraph for bidi purposes.

Example

<p class="clip">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> 

p.clip { 
   white-space: nowrap;
   overflow: hidden;
   background: #fc0; 
   padding: 5px;
   text-overflow: ellipsis; 
}

Browser Support

Desktop
6	12	1	7	11	1.3
Tablets / Mobile
≤37	18	7	11	1	1.0

Last updated by CSSPortal on: 3rd November 2019