How to summarize texts with CSS
Sometimes we have very large strings for the layout, so in this article we’ll learn how to summarize texts with CSS
Hey you Programmer, okay? Let’s learn one more new technique!
Our problem here is dealing with very large strings or texts
This probably came from the backend larger than the layout supports
So to adjust this question on the front end, let’s learn how to summarize text with CSS or strings, as you prefer to call it
And actually solving this is quite easy, let’s define a width for the text element, leave the overflow as hidden
Also we will add a white-space with nowrap for the words to actually extent out from the div, and finally an ellipsis at the end of the string to give an idea of continuity
That said, let’s practice?
How to summarize texts with CSS: practice
To start with, let’s create a dummy situation with HTML so we can insert the solution to the problem
See the HTML:
<!DOCTYPE html> <html> <head> <title>Como resumir textos com CSS</title> </head> <body> <h1>Título da página</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque pulvinar nisi enim, et facilisis orci congue convallis. Phasellus posuere leo non eros ullamcorper aliquam. Donec molestie sed urna in tincidunt. Suspendisse lobortis eleifend rutrum. Nullam porttitor ornare ipsum ac mattis. Aliquam erat volutpat. Phasellus tristique et diam ut tristique. Proin non ipsum orci. Aenean in iaculis justo, ac hendrerit felis.</p> </body> </html>
Basically we have a paragraph with very large text, and we need to make it smaller in the webpage.
So it is represented now:
And now I’m going to present the solution to the problem using CSS, check it out:
p {
width: 150px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
In this rule we execute what was explained in the theoretical part, observe that the width limit is completely optional
See what happens in the browser:
And that way we solved our problem applying CSS, we shortened the string we needed
Conclusion
We learned in this article that it is possible to reduce the size of a string in the front-end
We use some CSS rules to be able to reduce the element size and let the sentence flow
With overflow we hide the characters and insert the ellipses
And that’s it for today, see you on the next post! 🙂
Want to learn more about CSS? Click here!
