仅限于媒体查询时换行吗？

Question

当屏幕分辨率较小时，是否有除了使用 <br> 之外的换行解决方案？因为 br 总是会打断当前行。

以下是我的代码：

<h2>我创建独特、清晰易懂的网站。<br>我的作品符合网页标准。</h2>

我认为 CSS3 可能有解决此问题的方法。

是否有其他方法可以替代 <br>，因为只有在移动设备上页面才需要换行。

- Mo.

---

我喜欢“我的所有作品都符合网络标准” :-) - Billy Moat

将第二句话放入一个span元素中，然后在给定的宽度下将display属性设置为block。但我希望有比这更清晰的解决方案，而不是使用<br>标签。 - Fabrizio Calderan

Answer 1

您可以简单地将一个类添加到BR标签中，并默认设置为display:none。

然后在您的移动媒体查询中，将其设置为"display: static"。

我建议使用静态而不是块，因为我认为BR标记默认情况下不是块级元素，所以最好直接使用静态。

- Billy Moat

---

http://jsbin.com/iyamum/2/edit 好的，它可以工作了，并且采用“移动设备优先”的方法，无需反转显示-只需记得在点和<br>之间加一个空格。 - Fabrizio Calderan

display 没有名为 static 的属性值，因此最好使用 block。参考 http://www.w3schools.com/jsref/prop_style_display.asp。但我仍然想知道 <br /> 的默认显示属性是什么。 - Syed

@Syed - 关于静态定位的几篇文章：http://alistapart.com/article/css-positioning-101 https://css-tricks.com/what-if-there-was-no-position-static/ https://developer.mozilla.org/en/docs/Web/CSS/position - Billy Moat

了解，我使用了“display: unset”。 - Richard Petheram

@Syed 对于 <br /> 来说，它是 display:inline。 - davidhartman00

Answer 2

如果使用Bootstrap：

<br class="visible-xs">

- totallytotallyamazing

---

是的，如果问题标记为Bootstrap，这是最好的答案之一。 - Mo.

回答自己的问题：不行。请参见 https://getbootstrap.com/docs/4.1/migration/#responsive-utilities --“与其使用显式的.visible-* 类，您只需在该屏幕尺寸下不隐藏元素即可使其可见”。 - Felipe

Answer 3

您可以使用浮动布局，这样您甚至不需要考虑“捕捉点”应该在哪里。如果两个元素可以并排显示，它们就会并排显示；否则，它们就会立即转到下一行。

span {
    display: block;
    float: left;
    margin-right: 0.4em;
}

jsFiddle: http://jsfiddle.net/e4mWK/

- Christian

---

这是一个漂亮、聪明、干净的解决方案！ - dkamins

除了Christian的答案之外，您还可以使用CSS white-space:nowrap;属性来包装您不想换行的文本片段。例如标语、姓名等。 - Yann

Answer 4

移动优先，隐藏 br，然后在更大的屏幕上将显示设置回 initial：

<br class="hide desktop-show">

样式表：

.hide {
    display: none;
}

@media (min-width: 64em) {
    .desktop-show {
        display: initial;
    }
}

- François Romain