line exceeds the width of html card, but I dont want the text to continue in

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;    white-space:normal;      }  .card {            display: flex;    -webkit-box-pack: justify;        -ms-flex-pack: justify;            justify-content: space-between;    flex-direction:row;    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;          }      .card__img{    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';  

https://stackoverflow.com/questions/65745427/line-exceeds-the-width-of-html-card-but-i-dont-want-the-text-to-continue-in January 16, 2021 at 08:50AM