How to trim the text, which does not fit on a line, using only the CSS language, placing an ellipsis as a visual indicator of a broken line. text-overflow rule: ellipsis.
This article teaches us to carry out a simple but very useful task, for which we will use the CSS language as the only tool. It is about cutting a long line, which does not fit completely in the space of its container, placing an ellipsis “…”, so that the user visually perceives that a cut has been made.
The attribute that we are going to use is called text-overflow and the key value that we are going to use is “ellipsis”, but we also have to use it in conjunction with the overflow attribute and a container that has its size limited in width. In the end, for it to work, you need a fairly defined context, but once you have it clear, applying this effect will be practically immediate and you will save yourself some programming, also increasing the versatility of your composition.
Solution to place the ellipsis when breaking a line, with CSS
For the impatient, we are going to start by giving the complete solution to our exercise, so if you are in a hurry it will only be copy and paste. From now on you will have more detailed explanations about this practice so that you can learn much more.
div { width: 230px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
In the following image you can see how this CSS rule looks in a list of items. Some of them appear broken and with the ellipsis to indicate it.
This is the meaning of each of the attributes in this example:
- width: We have to limit the width of the container, otherwise the container will stretch until it can fit the content. You could have this width limitation in a parent container, or if there is no container, it will be the dimension in pixels of the device screen. What is clear is that someone has to limit the space for those cuts to become necessary.
- white-space: nowrap: This is so that the line does not behave in the default way when the space runs out, continuing at the bottom, on a new line. If we do not have this attribute, the text will adapt to the allocated space, making the element grow in height, without further ado.
- text-overflow: ellipsis: this is the key to the exercise, in which we are indicating that if all the text does not fit, place an “ellipsis”, which we call an ellipsis “…”.
- overflow: hidden: It is also important, because if you don’t place it, the text will simply come out of the container, appearing on the page but poorly designed. This is the effect that we want to avoid, that the text goes out of its container, breaking where necessary and placing the ellipses.
Why break the text with CSS and not with programming
Before this utility was available in CSS we had to do some programming to achieve a similar effect. It is not that it is difficult or very laborious to arrive at a cut like the one that is achieved with CSS, but it does involve a little more work and, most importantly, we will not have the same versatility.
If you use a programming language like PHP to break a segment of the string, and place the ellipses if necessary, the biggest problem you may have is adaptability to the size of the container.
It could happen in responsive designs that, by increasing or reducing the available space, the text does not always fit the size of the container. (In principle, with PHP we are not able to know the size of the container where a text is going to be positioned).
The good thing about applying CSS is that the browser itself will cut it where it is needed, making your text “responsive”, that is, adaptable to the dimensions of the page and its container.
Note: although it is true that there is a jQuery plugin to achieve this effect in a similar way, the truth is that using Javascript for something that you can do without programming is not advisable, also with CSS you can save reloading your page with code that reduces performance from the website.
Break the text when we have several lines
The only drawback to this technique is when you want to use it for text that you want to span multiple lines. In this case, the CSS will not work, since if you have configured the appearance of several lines, the text will always adapt to continue on the next line.
In these cases it might be interesting to trim the text using PHP or any server language. Consult this article if your problem is that the text is coming out of the container and you want to .
conclusion
With this effect we are able, effortlessly and without the need for programming, to limit the size of the texts so that they fit on a line in their container, automatically placing the ellipsis (ellipses) in cases where the text has had to be cut .
The best thing about this technique is that it is suitable for responsive design and that you leave the responsibility to the browser to cut it in the most appropriate place, depending on the space available for the text.
The only difficulty is that it is not enough to put a text-overflow: ellipsis; rather, you have to use that style in conjunction with other CSS rules.
Facebook Comments
Disqus