My Bulletproof CSS Template for Perfect Text Wrapping

utkarsh srivastava — Mon, 08 Sep 2025 18:44:09 +0000

I recently cracked the code on a CSS template that flawlessly wraps long text into any number of lines without causing overflow. It's a game-changer for clean, responsive layouts, and I'm jotting it down here for future reference. This solution ensures that text stays contained and visually appealing, regardless of the container size or content length.

Refer to this sandbox link
Demo

Let'see

  <div class="container">
      <div class="card">
        <h4>A Big Paragraph</h4>
        <p>
          Lorem, ipsum dolor sit amet consectetur adipisicing elit. Impedit non
          repellendus error quod sunt maiores voluptatum rerum illum, sit neque?
          Lorem, ipsum dolor sit amet consectetur adipisicing elit. Temporibus
          ipsa tenetur nihil placeat soluta rerum fugiat, sequi saepe dolorem
          iste ut beatae quos! Maxime repudiandae dolor labore nulla! Modi
          adipisci est ex quaerat veritatis obcaecati illo unde nihil delectus.
        </p>
      </div>
      <div class="card">
        <h4>A long word without any space</h4>
        <p>  
jjjjjjjjjjjjjjjjdjdjdjdndndndndndjdjsaanansnsns@djejr12243nnfnfnfngn@nfgfgjrmrnn4jfmfnm$mbmbbjbmnfgnvmfmfmfm#kvkfmfmfmfm
        </p>
      </div>
    </div>

So the CSS for the card and container

.container {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.card {
  box-shadow: 0 0px 5px rgba(0, 0, 0, 0.2);
  border-radius: 5px;
  padding: 0 20px;
  width: 40%;
}

It looks like

See how the long paragraph is growing in height. And our long word is going out of the card, which is disturbing our whole grid.

How to fix it? 🤔

Add this 🥷 Ninja Technique to p tag

p {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  text-overflow: ellipsis;
  overflow-wrap: anywhere;
}

-webkit-line-clamp, you can modify this value to adjust your wrapping to limit the number of lines shown. Any text that goes beyond this limit will be hidden. In my case, it goes up to line 2

overflow-wrap: anywhere; this we are using to handle long, big strings or words, like in our case. This property allows the browser to break words at any point to prevent overflow.

Boom see result

Give it a try.

Follow me for more tips like this 🙌

First timer open-source contribution

utkarsh srivastava — Mon, 09 Nov 2020 18:38:29 +0000

About me

My name is utkarsh Srivastava. You can call me ut. I m a front-end developer from India. A wish to make a little contribution in developer community brings me here. I always wish to participate in Hacktoberfest but some hurdles always stop me. But this time I hardly want to contribute in hacktoberfest. So finally I did it.

Background

My Hacktoberfest journey is wonderful. On the time of writing this article, I successfully completed my this year hacktoberfest.

Some steps that I took to complete this challenge

On the beginning of the October first, I went on hacktoberfest website hacktoberfest and signup for hacktoberfest 2020.
I don't have any idea at this point. So I start looking and reading the instructions in hacktoberfest website.
After that, I found some contribution website(where you can search for an open-source project and work on it).
So I found one i.e goodfirstissues.com.
I think this website is by Github I m not sure.
That's empowering first-timers contributors of open-source.
Then I select language in my case javascript to filter out projects.
Then I found beginners friendly projects and start working on the open-source projects.

Contributions

1.Meet-scheduler

This is an amazing Chrome extension that helps to manage google meet links.
I choose this project because I wanted to learn about how to develop a chrome extension. And the tech stack they use also matches my skills set.

2.Personal-dj

This is a personal-DJ website that helps us to create playlist directly in our Spotify account.
I choose this project because I always wanted to create online streaming type application.
So in order to take some idea. I choose this project because it is built with spotify API.

3.Shopyo

It's a point of sales software for small shops.
Build on python and flask
I choose this project to learn about flask.
But contributor told me to fix some small changes so I did that and they merge my PR.

4.Learn-opensource

It's basically a great contribution driven project which helps new developers to get familiar with open source.
I choose this project because it's built on javascript. And it's a little bit challenging to show different API's response into one page.
So I worked on issue page where I have to show all the open issues of their organization. So I added loader and after fetching data from GitHub API. I render it on that page.

Tips

One thing I notice whenever you start contributing to an open-source project. Please talk to repo owner as much as you can and try to understand their requirements what they really want.
And don't hesitate to ask because they are so helpful they will help you as much as they can. So please talk to them before you start working on it. It will save lots of time. So that you can easily submit 4 PR's.

Reflections

That's it, guys. This is all about my hacktoberfest journey. Overall experience is awesome. I have made new connections. Also, learn about so many interesting things. I enjoy this October like an open-source festival. Thanks to open-source community to help me and give me such a great experience. And I m surely participate again in hacktoberfest.

So thank you guys I hope it's helpful.

Connect with me:
Github
Linked-in

DEV Community: utkarsh srivastava