How to summarize texts with CSS

November 4, 2021

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

summarize texts using CSS cover

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>
  <title>Como resumir textos com CSS</title>
  <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>

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


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!

Notify of

Inline Feedbacks
View all comments
Would love your thoughts, please comment.x