使用响应式设计将句子放在两行上的最佳方法是什么

Question

出于设计目的，我想将一个句子拆分到另一行，我遇到的问题是随着分辨率变小，它可以无缝地放入包含的 div 中。我目前设置它的方式是将句子的宽度设置为小于包含的 div，以便单词“all”之后的任何文本向下移动到下一行。我遇到的问题显然是 % width 在任何低于最高分辨率的媒体查询上看起来都不好。

唯一的方法是创建多个媒体查询吗？

当前代码：

div.slide {
  padding: 110px 30px 110px 30px;
  height: 500px;
  text-align: center;
}
div.slide-content {
  padding: 0px;
  margin: 0 auto;
  max-width: 1100px;
}
div.slide-text {
  font-weight: 400;
  font-size: 17px;
  width: 75%;
  margin: 0 auto;
  padding-top: 20px;
  padding-bottom: 20px;
}

<div class="slide">
  <div class="slide-content">
    <div class="slide-text">Lorem ipsum dolor sit amet, cLorem ipsum dolor sit amet onsectetuer adipiscing elit-all Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</div>
  </div>
</div>

Answer 1

我肯定会建议为此使用媒体查询。 如果您想完全接管断句的位置，您可以在确切的位置添加换行标记，但我不建议这样做，因为它也可能影响其他分辨率。

所以 .slide-text 宽度与媒体查询相结合应该没问题 :)

例如

@media (max-width: 600px) {
  div.slide-text {
    width: 90%;
  }
}
@media (max-width: 900px) {
  div.slide-text {
    width: 85%;
  }
}
@media (min-width: 901px) {
  div.slide-text {
    width: 75%;
  }
}

只要确保你更新它以满足你的需要:)