html - 用响应式设计在两行中住一次句子的最佳方法是什么

出于设计目的，我希望将一个句子拆分成另一行，我遇到的问题是，当分辨率变小时，将它无缝地放在包含div中。我现在设置它的方法是将句子的宽度设置为小于包含div，这样“all”之后的任何文本都会下移到下一行。我遇到的问题是，在任何低于最高分辨率的媒体查询中，%宽度看起来都不太好。
唯一的方法是创建多个媒体查询吗？
当前代码：

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>

最佳答案

我绝对建议使用媒体查询。
如果你想完全接管分句的位置，你可以在准确的位置添加换行标记，但我不建议这样做，因为这可能会影响其他分辨率。
因此，幻灯片文本宽度与媒体查询结合使用应该很好：）
例如

@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%;
  }
}

只需确保您更新它以满足您的需要：）

关于html - 用响应式设计在两行中住一次句子的最佳方法是什么，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/45149028/