CSS text overflow is used when we want to show the content in the limited width or height.
CSS text overflow property handles the content when it is too large to show within the block.
Syntax
Syntax
1
text-overflow:enter value foroverflow
Example
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<style>
p{
border:1pxsolidyellow;
border-radius:20px;
padding:10px;
white-space:nowrap;
width:12em;
overflow:hidden;
}
p.first-para{
text-overflow:clip;
}
p.second-para{
text-overflow:ellipsis;
}
</style>
<pclass="first-para">Thisisthe HTML paragraph inside the div toshow text overflow property.Thisuses text overflow tohandle the text withinablock.Thisisthe first paragraph.</p>
<pclass="second-para">Thisisthe HTML paragraph inside the div toshow text overflow property.Thisuses text overflow tohandle the text withinablock.Thisisthe second paragraph.</p>
Output
This is the HTML paragraph inside the div to show text overflow property. This uses text overflow to handle the text within a block. This is the first paragraph.
This is the HTML paragraph inside the div to show text overflow property. This uses text overflow to handle the text within a block. This is the second paragraph.
CSS text overflow values list
Sr. No.
value
Description
1
clip
Used to clip the text inside block. The value for this is clip.
2
ellipsis
Used to ellipsis the text inside block. This puts “…” to the end of the text. The value for this is ellipsis.
3
initial
Used to define as the property initial value.
4
inherit
Used to define the computed value of property on the elements parent.
5
unset
Used to define the property either acts as inherit or initial, depending on the property if it is inherited or not.
