Truncating / Triming the string with Ellipsis (…)

 

p {
white-space: nowrap;
width: 100%;
overflow: hidden;              /* "overflow" value must be different from "visible" */
text-overflow: ellipsis;
}

 

Here according to the css defined above the string given in paragraph tags will be truncated or trimmed using ellipsis (the symbol of 3 dots). All the 4 properties are essential to define. Explaining the role of all 4 properties :

• white-space: nowrap; >>> Brings the text in one single line.
• width: 100%; >>> Sets the width of the paragraph tag. Here in this case the width of parent tag of para tag will be considered.
• overflow: hidden; >>> The text going out of width (range / limit) of the para tag is set hidden.
• text-overflow: ellipsis; >>> Gives 3 dots where the text was truncated. The ellipsis would be 100% visible in any given case, doesn’t matter how much text is trimmed.

 My name is Anthony Gonsalves. I work in a coal mine.

If the width of parent element of p tag has width of 100px, the result string would be : My name is …