'Png images with text. Break line image + at least some text

Hi I have some text in quoutes (I used png files as quoutes).

The problem is with the line breaking when you shrink down the window size. I am trying to avoid breaking line with image only, like this :

enter image description here

It should only break line with at least some text to the left, like this: enter image description here How can I achieve this? Any help would be much appreciated.

.testimonials {
  padding: 80px 0;
  padding: 60px 0;
  position: relative;
}

.testimonials::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

.testimonials .testimonial-item {
  text-align: center;
  color: #fff;
}

.testimonials .testimonial-item .testimonial-img {
  width: 100px;
  border-radius: 50%;
  border: 2px solid #fff;
  margin: 0 auto;
}

.testimonials .testimonial-item h3 {
  font-size: 30px;
  font-weight: bold;
  margin: 10px 0 5px 0;
  color: black;
}

.testimonials .testimonial-item h4 {
  font-size: 20px;
  color: red;
  margin: 0 0 15px 0;
}

.testimonials .testimonial-item .quote-icon-left, .testimonials .testimonial-item .quote-icon-right {
  color: rgba(255, 255, 255, 0.6);
  font-size: 26px;
}

.testimonials .testimonial-item .quote-icon-left {
  display: inline-block;
  left: -2px;
  position: relative;
  top: 5px;
}

.testimonials .testimonial-item .quote-icon-right {
  display: inline-block;
  right: -2px;
  position: relative;

}

.testimonials .testimonial-item p {
  font-style: italic;
  margin: 0 auto 15px auto;
  color: black;
}

@media (min-width: 1024px) {
  .testimonials {
    background-attachment: fixed;
  }
}

@media (min-width: 992px) {
  .testimonials .testimonial-item p {
    width: 80%;
  }  
}
                    <div class="testimonials">
                      <div class="testimonial-item">
                        <h3>John</h3>
                        <h4>Master</h4>
                        <p>
                          <img src="https://www.pngall.com/wp-content/uploads/12/Quotes-Mark-Symbol-PNG-Image.png" class="bi bi-quote  quote-icon-left" style="max-width:26px;"/>
                          Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum
                          <img src="https://www.pngall.com/wp-content/uploads/12/Quotes-Mark-Symbol-PNG-Image.png" class="bi bi-quote  quote-icon-right" style="max-width:26px;"/>
                        </p>
                      </div>
                    </div>
htmlquotesline-breaks


Solution 1:[1]

I just figured out an asnwer based on post : Keep <img> always at the end of text line

                   <div class="testimonials">
                      <div class="testimonial-item">
                        <h3>John</h3>
                        <h4>Master</h4>
                        <p>
                          <img src="https://www.pngall.com/wp-content/uploads/12/Quotes-Mark-Symbol-PNG-Image.png" class="bi bi-quote  quote-icon-left" style="max-width:26px;"/>
                              Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem 
                          <span style="white-space:nowrap;">ipsum
                              <img src="https://www.pngall.com/wp-content/uploads/12/Quotes-Mark-Symbol-PNG-Image.png" class="bi bi-quote  quote-icon-right" style="max-width:26px;"/>
                          </span>
                        </p>
                      </div>
                   </div>

We have to combine last word with the image in the <span></span> element. Then give it a white-space:nowrap styling.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1

Related Questions