带文本的PNG图像。断路线图像＆＃x2B;至少一些文字

Question

嗨，我有一些文字（我使用png文件作为Quoutes）。

问题在于，当您缩小窗口大小时，线路破裂。我试图避免仅使用图像破裂，例如：

​ 我该如何实现？任何帮助都将不胜感激。

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

Answer 1

我只是根据帖子找到了一个ASNWER： keep＆lt; img＆gt; img＆gt; ;始终在文本行的末尾

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

我们必须将最后一个单词与＆lt; span＆gt;/span＆gt;元素中的图像结合起来。然后给它一个白空间：NowRap样式。