CODEWITHSUNDEEP
htmlcss
deloco
deloco

Reputation: 43

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

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

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="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>

Upvotes: 0

Views: 632

Answers (1)

GBra 4.669
GBra 4.669

Reputation: 1679

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: https://developer.mozilla.org/en-US/docs/Web/CSS/word-break

You could also try:

text-overflow: ellipsis;

that will shorten with ... when it doesn't fit anymore

Upvotes: 1

Related Questions