CODEWITHSUNDEEP
javascripthtmlcsstext
Code Fingers
Code Fingers

Reputation: 301

How to fix text overflow for paragraph text in CSS?

I am trying to make cards to display for my note taking app and if the user puts a lot of text there should be "..." at the end. In CSS that can be done by using text-overflow: ellipsis; But its not working as shown: Screenshot

all the text is overflowing out of the box. Also, I am using bootstrap in my project and the way each card is made is here:

let cardTemplate = `<div class="col-sm-4">
                <div class="card">
                    <div class="card-body">
                        <h5 class="card-title">${title.value}</h5>
                        <p class="card-text">
                            ${content.value}
                        </p>
                        <a href="#" class="btn btn-primary">Show More</a>
                    </div>
                </div>
            </div>`;

this is like a template for one card and I just add this to the div to display them. I have given all of the resources now how can I fix the overflow of text?

Thanks for reading my query!

Upvotes: 1

Views: 3083

Answers (2)

getup8
getup8

Reputation: 8228

You can get the ellipses to show up by doing something like:

.card-text {
  text-overflow: ellipsis;
  height: 100px;
  overflow: hidden;
  white-space: nowrap;
}

But that will remove the line breaks so not likely something you want. You can remove the white-space directive but then you won't get the ellipses.

There's a good post on CSS Tricks on this and it shows a few alternative ways, none of which are great: https://css-tricks.com/line-clampin/

Edit

Actually webkit-line-clamp might work for your use case..

.card-text {
  display: -webkit-box;
  -webkit-line-clamp: 10;
  -webkit-box-orient: vertical;  
  overflow: hidden;
  text-overflow: ellipsis;
}

Upvotes: 1

vikram mohod
vikram mohod

Reputation: 119

You are missing CSS property "white-space" this will tell that no space is available at the end of div so either line will break or behave like property given by user Please try to add below property with text-overflow property in CSS class.

white-space: nowrap;
text-overflow: ellipsis;

Upvotes: 1

Related Questions