带有文本的 Png 图像。换行图片 + 至少一些文字

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

提问人：Simonsoft177 提问时间：5/17/2022 最后编辑：Simonsoft177 更新时间：5/18/2022 访问量：137

问：

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

问题在于缩小窗口大小时的换行。我试图避免仅与图像断行，如下所示：

enter image description here

它应该只在左边至少用一些文本来换行，比如这样：enter image description here我怎样才能实现这一点？任何帮助将不胜感激。

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

HTML 引号换 行

评论

答：

1赞 Simonsoft177 5/18/2022 #1

我刚刚想出了一个基于帖子的 asnwer：始终在文本行的末尾保持 <img>

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

我们必须将最后一个单词与元素中的图像结合起来。然后给它一个样式。<span></span>white-space:nowrap

上一个：如何在不接触任何 HTML 的情况下使用 ：before ：after 使用 CSS 设置 &lt;Blockquote&gt; 元素的样式

下一个：rmarkdown 中的引号问题，使用 jinja 生成 html