Question

嘿，我想知道当它在不同的屏幕尺寸上时如何移动段落中的br元素。我知道这听起来像一个令人困惑/棘手的问题，但让我解释一下：

这个p标签中的br元素就在这里。说明br元素现在在哪里，当在桌面上查看此站点时，它是diplaying。但我希望视图中的断行（br元素）放在单词＆＃34; break＆＃34;之前。当我在较小的设备上观看它时，例如平板电脑或手机或其他东西。

<p>I am a <br/> Paragraph with a break line in it.</p>

有可能吗？如果是，有没有办法用javascript或css来实现它而不实际更改html代码呢？

Answer 1

你可以这样做。

<p>I am a <br class="sm-hide lg-show"/> Paragraph with a <br class="sm-show lg-hide"/>break line in it.</p>

.sm-hide {
  display: none;
}

.sm-show {
  display: block;
}

@media screen and (min-width: 961px) {
  .lg-hide {
    display: none;
  }

   .lg-show {
    display: block;
  } 
}

Answer 2

无论您使用何种浏览器或设备，

<br/>标记都会强制HTML换行。这里<br/>不是正确的方法。如果您真的希望根据您的设备（屏幕大小）在不同的地方换行，您可以使用CSS @media规则，例如

@media screen and (max-width: 480px) { /* your css code */ }

因此上述css规则仅适用于宽度小于480px的屏幕。

另一方面，有一些非常流行的库/框架可供您设计桌面和/或移动设备，例如Bootstrap。

移动br元素

2 个答案: