行超出了html卡的宽度，但我不希望文本继续

你好，这张卡有问题。当文本比卡片长时，我希望卡片（或刚好右边距）加宽。我已经在Stackoverflow中搜索过了，但是所有的答案都暗示了某种类型的断线，但我不想这样，因为这张卡会出现在拖缆的屏幕上，看起来可能很难看

这是我的CSS。有什么想法吗

.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';

编辑：这是我的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="https://i.ibb.co/kXWtXyv/logo.jpg" alt="Image name" style="height: 58px; width: 1px;">
  
     </div>
  <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> donatealgo.com/lahoradelanostalgiabocaadoca</strong></p>
  
</div>
</div>
</div>

捐赠algo en：
donatealgo.com/lahoradelananostalgiabocadoca

在您的卡片文本中（最有可能在CSS选择器“.card\uuu text”中），但无法确定，因为您没有提供HTML）应用以下CSS：

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

有关MDN上CSS分词属性的详细信息：

您也可以尝试：

text-overflow: ellipsis;

---

这将随着…而缩短。。。当它不再适合时

插入html，这里是您的html代码：）没有相应html的CSS对我们来说是毫无用处的。请添加一个最小的可复制代码段（Ctrl+M）。@s.kuznetsov:Carry-on-Mate:）您做得很好。我要去祈祷了！！！^^:-）@ImranRafiqRather，很高兴再次见到你，我的朋友：）