Zeilenumbruch für die media-query ?

Gibt es eine Lösung für den Zeilenumbruch, wenn die Bildschirm-Auflösung zu klein ist, anstelle von <br> ?

weil br break line die ganze Zeit 🙁

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

Ich denke, CSS3 haben können Lösung dieser Frage

gibt es eine Lösung für dieses <br> weil der Zeilenumbruch wird nur benötigt, wenn die Seite auf mobilen

Dank im Voraus für Eure Hilfe

  • Ich Liebe Alle meine arbeiten entsprechen web' 🙂
  • wickeln Sie den zweiten Satz in ein span-element, und weisen Sie dann display: block um das element an einer bestimmten Breite. Aber ich möchte gab es eine sauberere Lösung als diese, oder mit <br>
InformationsquelleAutor Mo. | 2013-04-30
  1. 21

    Könnten Sie einfach eine Klasse hinzufügen, um das BR-tag, und legen Sie es auf sein display:none standardmäßig.

    Dann in Ihre mobile-media-query setzen Sie ihn auf "display: static"

    Habe ich vorgeschlagen, statische statt blockieren, weil ich nicht denke, dass ein BR-tag-Anzeige block standardmäßig so wahrscheinlich am besten, einfach zu gehen, mit static.

    InformationsquelleAutor Billy Moat
  2. 6

    Wenn mit Bootstrap:

    <br class="visible-xs">
    • ja, es ist eine der besten Antworten, wenn bootstrap markiert in der Frage
    • Tun die breakpoints arbeiten mit .visible in der bootstrap-4?
    • In Antwort auf meine eigene Frage: Nein. siehe 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
    InformationsquelleAutor totallytotallyamazing
  3. 2

    Könnte man nur verwenden, Schwimmern, so dass Sie nie brauchen, um selbst darüber nachzudenken, wo die schnappen Punkt sein muss. Es zeigt beide neben einander, oder sofort springt zu der nächsten Zeile, wenn Sie nicht passen.

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

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

    • Dies ist ein schön clever saubere Lösung!
    • In Ergänzung zu Christians Antwort, Sie können auch die CSS white-space:nowrap; Eigenschaft wrap Stücke von text, die Sie nicht wollen, um den Zeilenumbruch. I. e ein Motto, einen richtigen Namen etc.
    InformationsquelleAutor Christian Varga
  4. 0

    Mobile-first, blenden Sie die br, dann setzen Sie die Anzeige zurück zu initial auf größeren Bildschirmen: 

    <br class="hide desktop-show">

    css: 

    .hide {
    display: none;
}

@media (min-width: 64em) {
    .desktop-show {
        display: initial;
    }
}
    InformationsquelleAutor François Romain
Schreibe einen Kommentar