What is the CSS3 text-overflow property, cases in which we can use it and compatibility with browsers.
In the we had not yet talked about a very useful property, called text-overflow. It allows us to indicate what a text will look like when it exceeds the available space inside a box. More specifically, how do we want the user to be signaled that a text cannot be fully displayed within the element where it is located.
Before CSS3, when we wanted to signal to the user that a piece of text was not displayed completely, we had to introduce some programming, to detect cases where it was too long and then cut it off programmatically. That situation may still be necessary in many cases, but in many others it is really an unnecessary waste of time, because the CSS itself can cut it in the right place and display it conveniently to the user.
It’s a simple property to use, so it won’t require much explanation, but not everyone knows about it and uses it regularly. Above all, one specific value of the possible property is interesting: “ellipsis”, which introduces three ellipsis points at the end of the text that is being cut.
.potentially-long-text { text-overflow: ellipsis; }
What this means is that, if the potentially long text does not fit in the width of the element, put three ellipses so that the user is aware of it.
You can see the effect in the image below, where my name doesn’t quite fit in the box where it’s placed:
Note: Keep in mind that with other CSS properties you can indicate what you want to happen with that potentially long text, for example that it overflows the box or that it is displayed as far as it can according to its size, that words are trimmed with line breaks or They are all displayed on the same line. What the text-overflow property tells us is how this cut should be visually represented in the text.
Possible values of text-overflow
As possible values of this property we find:
- clip: This is the default value and means that the text will simply be clipped, showing no effect other than clipping where it touches.
- ellipsis: Places three ellipses next to the text, indicating that the text does not fit completely.
- string: It is expected that a string can be indicated to be placed instead of the ellipsis. Its value would be for example “–” and it would place that string at the end of the trimmed text. However, this functionality is only experimental and doesn’t really work in all browsers, so using it is not recommended.
- fade: it is another experimental value, which is used to generate a “fade-out” effect. Its value can be a length and a percentage, but at the moment it cannot be used. You can also set the values ”initial” and “inherit” to restore the property to its initial value or to inherit from the container where it is placed.
text-overflow support
This property can be used without any problem, since it is supported by all browsers, even many that are really old.
It is supported by IE since version 6 and practically all others, including of course Firefox, Chrome, etc.
Just keep in mind that the values that will really work for you are “clip” the default (which does not show anything) and “ellipsis” which allows you to place those three ellipses that we have already explained.
Facebook Comments
Disqus