html - CSS/HTML : Add line break to HTML only if screen size < xxx pixels?

Question

所以我设计了一个如下所示的页面样式:

它是响应式的，但是当我缩小窗口大小时，它最终看起来像这样:

我想修复间距，因为我想在按钮和下面的图片之间有一两个换行符。但是，如果屏幕尺寸小于 767 像素，我只需要这些换行符。做这个的最好方式是什么？谢谢。

Answer 1

在这种情况下，我同意其他人的看法， margin 是一个更好的解决方案。然而，对于需要换行的情况(在我的例子中，我需要在窄屏幕上的特定位置包装一个长 URL)，您可以像这样插入一个虚拟中断:

HTML:

ALongLineOfUnbrokenText<span class="narrow"></span>ThatNeedsToBeBroken

CSS:

@media (max-width: 400px) {
  .narrow {
    display: block
  }
}

希望其他人会发现这很有用。