移动 br 元素

Question

嘿，我想知道当 br 元素在不同的屏幕尺寸时如何移动段落中的元素。我知道这听起来像是一个 confusing/tricky 问题，但让我解释一下：

p 标签中的这个 br 元素就在这里。说 br 元素现在在哪里，当这个站点在桌面上查看时它正在显示。但是当我在平板电脑或 phone 等较小的设备上查看它时，我想查看位于单词 "break" 之前的断线（br 元素）。

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

可能吗？如果是，有没有办法用 javascript 或 css 来做，而无需实际更改 html 代码本身？

Answer 1

<br/> 标记强制 HTML 换行，无论您使用的浏览器或设备如何。这里 <br/> 不是正确的方法。如果你真的想要，比如说，根据你的设备（屏幕尺寸）在不同的地方换行，你可以使用 CSS @media 规则，比如

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

所以上面的css规则只适用于宽度小于480px的屏幕。

另一方面，有一些非常流行的 library/framework 供您设计既适用于桌面 and/or 移动的网页，例如 Bootstrap。

Answer 2

你可以这样做。

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

移动 br 元素

Moving a br element

html

javascript

css

jquery

multimedia