CSS | text-overflow Property
CSS text-overflow Property is used to specify that some text has overflown and hidden from view. The white-space property must be set to nowrap and overflow property must be hidden.
Syntax:
text-overflow: clip|string|ellipsis|initial|inherit;
Property Values:
- clip: Text is clipped and cannot be seen. This is the default value.
Syntax:
text-overflow: clip;
Example:
<
html
>
<
head
>
<
title
>
CSS | text-overflow Property
</
ttile
>
<
style
type
=
"text/css"
>
div{
width: 500px;
font-size: 50px;
white-space: nowrap;
overflow: hidden;
text-overflow: clip;
}
</
style
>
</
head
>
<
body
>
<
div
>
Geeks For Geeks:
A computer science portal for geeks.
</
div
>
</
body
>
</
html
>
chevron_rightfilter_noneOutput:
CSS text-overflow_clip
- ellipsis: Text is clipped and the clipped text is represented as ‘…’ .
Syntax:text-overflow: ellipsis;
Example:
<
html
>
<
head
>
<
title
>
CSS | text-overflow Property
</
ttile
>
<
style
type
=
"text/css"
>
div {
width: 500px;
font-size: 50px;
white-space: nowrap;
overflow: hidden;
text-overflow: clip;
}
</
style
>
</
head
>
<
body
>
<
div
>
Geeks For Geeks:
A computer science portal for geeks.
</
div
>
</
body
>
</
html
>
chevron_rightfilter_noneOutput:
- string: The clipped text is represented to the user using a string of the coder’s choice. This option is only visible in Firefox browser.
Syntax:
text-overflow: string; where a string is defined by the coder.
Example:
<
html
>
<
head
>
<
title
>
CSS | text-overflow Property
</
ttile
>
<
style
type
=
"text/css"
>
div {
width: 500px;
font-size: 50px;
white-space: nowrap;
overflow: hidden;
text-overflow: "Value Clipped";
}
</
style
>
</
head
>
<
body
>
<
div
>
Geeks For Geeks:
A computer science portal for geeks.
</
div
>
</
body
>
</
html
>
chevron_rightfilter_noneOutput:
- initial: This value sets the text-overflow property to default value.
Syntax:
text-overflow: initial;
Example:
<
html
>
<
head
>
<
title
>
CSS | text-overflow Property
</
ttile
>
<
style
type
=
"text/css"
>
div {
width: 500px;
font-size: 50px;
white-space: nowrap;
overflow: hidden;
text-overflow: initial;
}
</
style
>
</
head
>
<
body
>
<
div
>
Geeks For Geeks:
A computer science portal for geeks.
</
div
>
</
body
>
</
html
>
chevron_rightfilter_noneOutput:
- inherit: This value sets the text-overflow property to the value of the parent element.
Syntax:
text-overflow: inherit;
Example:
<
html
>
<
head
>
<
title
>
CSS | text-overflow Property
</
ttile
>
<
style
type
=
"text/css"
>
div {
width: 500px;
font-size: 50px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
h1 {
width: 500px;
white-space: nowrap;
overflow: hidden;
text-overflow: inherit;
}
</
style
>
</
head
>
<
body
>
<
div
>
Geeks For Geeks:
A computer science portal for geeks.
<
h1
>
I have inherited my overflow property from div.
</
h1
>
</
div
>
</
body
>
</
html
>
chevron_rightfilter_noneOutput:
Supported Browsers: The browser supported by text-overflow property are listed below:
- Chrome: 4.0
- Firefox: 7.0
- Safari: 3.1
- Edge: 16
- Opera: 11.0