Solution 1 :

In your card text (most likely in the CSS selector “.card__text”, but cannot be sure since you are not providing the HTML) apply the following CSS:

word-break: break-all;
word-break: break-word; // deprecated

More info on the CSS word-break property on MDN:

You could also try:

text-overflow: ellipsis;

that will shorten with … when it doesn’t fit anymore

Problem :

enter image description here

Hello, I am having problems with this card. I want the card (or just the right margin) to widen when the text is longer than it. I have searched this in Stackoverflow but all the answers suggest some type of line break, but I dont want that because this card will appear on streamers’ screens and it might look ugly like that.

This is my CSS. Any ideas?

.card__list {
  max-width: 1200px;
  margin: 2rem auto;
  position: absolute;
  top: 480px;
  left: 0px;
  width: 680px;
  height: 30px;
.card {
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  height: 60px;
  margin-bottom: 1.5rem;
  -webkit-box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.05);
          box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.05);
  transition: all 0.25s ease-in;

  flex: 1 30%;
  -webkit-flex: 1 30%;
  width: 300px;
  position: relative;
.card__img-preview {
  display: relative;
  object-fit: cover;
  min-width: 60px;
  max-width: 100%;

.card__content {
  flex: 1 70%;
  -webkit-flex: 1 70%;
  padding: 0.4rem;
.card__title {
    font-size: 0.8rem;
  font-weight: 700;
  margin: 0;
  font-family: 'Lato';
.card__text {
    font-size: 0.9rem;
  line-height: 17px;
  font-family: 'Lato';

Edit: here is my html:

  <section class="card__list row">
    <div class="card__box col-md-6 col-sm-12">
    <div class="card">
    <div class="card__img">
    <img class="card__img-preview" src="" alt="Image name" style="height: 58px; width: 1px;">
  <div class="card__content">
    <h4 class="card__title" style="padding-bottom: 1px; text-align: left;color: #6441A4 ;">Donate algo en:</h4> 
    <p class="card__text"><i class="fa fa-map-marker" aria-hidden="true"></i> <strong></strong></p>


Comment posted by s.kuznetsov

insert html, pls

Comment posted by

Where is your HTML Code 🙂

Comment posted by tacoshy

CSS without corresponding HTML is quite useless to us. Please add a minimal reproduciable code snippet (Ctrl + M).

Comment posted by Imran Rafiq Rather

@s.kuznetsov: Carry on Mate 🙂 You are doing a great Job. I am heading for prayers !!! ^^:-)

Comment posted by s.kuznetsov

@ImranRafiqRather, glad to see you again my friend 🙂