【问题标题】:Line break for media-query only?仅用于媒体查询的换行符?
【发布时间】:2013-04-24 15:02:52
【问题描述】:

当屏幕分辨率小而不是<br>时,有没有解决换行的方法?因为br一直断线。

这是我的代码:

<h2>I create unique, clean sites that are easy to navigate.<br>All my works comply with web</h2>

我认为 CSS3 可能会解决这个问题。

这个<br>有什么解决方案吗,因为只有在移动页面上才需要换行。

【问题讨论】:

  • 我喜欢“我所有的作品都符合网络”:-)
  • 将第二句包装成一个span元素,然后将display: block分配给给定宽度的元素。但我希望有比这更清洁的解决方案或使用

标签: html css media-queries


【解决方案1】:

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

然后在您的移动媒体查询中将其设置为“显示:静态”

我建议使用静态而不是块,因为我不认为 BR 标签默认是显示块,所以最好简单地使用静态。

【讨论】:

【解决方案2】:

如果使用 Bootstrap:

<br class="visible-xs">

【讨论】:

  • 是的,如果问题中带有 bootstrap 标记,这是最好的答案之一
  • 回答我自己的问题:不。见getbootstrap.com/docs/4.1/migration/#responsive-utilities——Rather than using explicit .visible-* classes, you make an element visible by simply not hiding it at that screen size
【解决方案3】:

您可以只使用浮点数,这样您甚至不需要考虑捕捉点需要在哪里。它要么彼此相邻显示,要么立即捕捉到不适合的下一行。

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

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

【讨论】:

  • 这是一个非常聪明的清洁解决方案!
  • 作为对 Christian 的回答的补充,您还可以使用 CSS white-space:nowrap;属性来包装您不想换行的文本片段。即口号,专有名称等。
【解决方案4】:

首先在移动端隐藏br,然后在大屏幕上将显示设置回initial

<br class="hide desktop-show">

css:

.hide {
    display: none;
}

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

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2023-03-04
    • 2013-07-11
    • 2019-01-21
    • 1970-01-01
    • 2011-11-09
    • 2018-05-12
    • 2014-04-09
    相关资源
    最近更新 更多