CSS text-overflow Property

Clash Royale CLAN TAG#URR8PPP

googletag.cmd.push(function() googletag.display('div-gpt-ad-1422003450156-2'); );

CSS text-overflow Property

❮ Previous
Complete CSS Reference
Next ❯

Example

Use of the text-overflow property:

div

    white-space: nowrap;
    overflow:
hidden;

text-overflow: ellipsis;

Try it Yourself »

More "Try it Yourself" examples below.

Definition and Usage

The text-overflow property specifies how overflowed content that is not
displayed should be signaled to the user. It can be clipped, display an ellipsis
(...), or display a custom string.

Both of the following properties are required for text-overflow:

white-space: nowrap;

overflow: hidden;

Default value:	clip
Inherited:	no
Animatable:	no. Read about animatable
Version:	CSS3
JavaScript syntax:	object.style.textOverflow="ellipsis" Try it

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Numbers followed by -o- specify the first version that worked with a prefix.

Property
text-overflow	4.0	6.0	7.0	3.1	11.0 9.0 -o-

googletag.cmd.push(function() googletag.display('div-gpt-ad-1493883843099-0'); );

CSS Syntax

text-overflow: clip|ellipsis|string|initial|inherit;

Property Values

Value	Description	Play it
clip	Default value. The text is clipped and not accessible	Play it »
ellipsis	Render an ellipsis ("...") to represent the clipped text	Play it »
string	Render the given string to represent the clipped text
initial	Sets this property to its default value. Read about initial	Play it »
inherit	Inherits this property from its parent element. Read about inherit

More Examples

Example

Text-overflow with a hover effect (show entire text on hover):

div.a
    white-space: nowrap;

overflow: hidden;

text-overflow: ellipsis;

div.a:hover

overflow: visible;

Try it Yourself »

CSS tutorial: CSS Text Effects

HTML DOM reference: textOverflow property

❮ Previous
Complete CSS Reference
Next ❯

搜尋此網誌

wefcdr