CSS text-overflow property
Let’s have an input box where you have a pretty long string to show.
I am taking input but similar to this, you may have other elements also where you have the limited height and the text is crossing the width because the element has a specific width.
In such a case, you want to show that there is more text but if you at the output, you cannot make out that there are some more words inside the textbox i.e., the rest of the text is hidden. Isn’t it??
And this is exactly what you want to show to the user that the sentence/line/para does not end, there are more words here inside this text box, or even if there is no text box, you just want the user to know this is not it…
So when this text is crossing the limit or I can say overflowing out of this element, you can control how you want it to overflow.
Right now let’s try ellipsis (you guys might be knowing about ellipsis — these 3 dots … are called ellipsis).
Now, what if I give text-overflow: ellipsis? Let’s check
Look at the text box and now you can see 3 dots which means there’s something more ahead of this word “mo…“. It does not end there.
These properties will give you precise control over the rendering of text on the web browser.
Do remember that when you do not have input provision, where maybe you are using a division, you need to use white-space:nowrap; and overflow: hidden; with this property. But right now I have explained in the simplest of ways what the text-overflow property is…
The syntax is :
text-overflow: clip | ellipsis | string | initial | inherit;
Let us go through each of these property values with the same example to see how they work:
clip: Here the text is clipped/truncated and cannot be seen (it is also the default value).
So in the above example, you can see now that it has clipped the “text” word. As I said, this is the default property, so the text is going to be shown in the same way even if you do not use this property.
ellipsis: We have already seen this at the beginning.
This is a very popular text-overflow property and is the most widely used. This value displays three dots to show the clipped text which is displayed within the area, decreasing the amount of text.
This is how your text will look like if you use this property:
Check out my bestselling and highest rated ReactJS course on Udemy —
Mastering React With Interview Questions,eStore Project-2022
string: By using this property, the developer can use the string of his/her own choice to represent the clipped text to the user.
Warning: The string value for the text-overflow property is not supported in most web browsers, you should better avoid this.
I am using the Firefox browser to show you this example as firefox supports this property.
I have used the string — three dashes “- - -”
initial: It is used to set an element’s CSS property to its default value i.e., this value will set the text-overflow property to its default value which again is like the clip property which we have seen earlier and this is how it looks-
inherit: This property will inherit the property from its parent element’s property — i.e., the value will set the text-overflow property to the value of the parent element.
Let’s see how it works in our example:
I am going to add a <div> to my HTML code and also add CSS for division and input in the CSS pane. For <div> I am keeping the overflow property as ellipsis and for input, I will use the inherit property.
Now you can see that because the property of <div> is ellipsis, the input element has inherited that property and is showing the text with the same property.
Do remember that — Text-overflow can only happen on block or inline-block level elements because the element needs to have a width in order to be overflowed.
