Zeilenumbruch via media queries?

Hey,

Du kannst z.b. dem P-Tag in der Desktopvariante eine Breite von 30% geben und dann in der Handyversion die Breite 100%.

Siehe dazu auch Media Queries.

Grüße,

Stef

Eine genaue Kontrolle hast Du nur über Zeilenumbrüche <br> in HTML. In CSS kannst Du nur bestimmen, ob umgebrochen werden soll oder nicht. Wo und an welcher Stelle kannst Du darüber nicht beeinflussen.Habe auch ehrlich gesagt noch keine Seite umgesetzt, bei der das wichtig war...

Versuche, die drei Bestandteile des Absatzes in, z. B. span-Tags zu legen. Dann solltest Du mit Flexlayout und Mediaqueries die Anordnung umschalten können.

Hi - geht schon sehr einfach ohne doppelten Inhalt - ist nur nicht besonders schön vom Quellcode

<style>
@media only screen and ( max-width: 500px ) {
    .mobil {
        display: none;
    }
}
</style>

<p>Hier ein Bereich <span class="mobil"><br></span> ohne Umbruch je nach media querie</p>

Und noch eine Erweiterung/Verbesserung ohne das <br>

<style>
@media only screen and ( max-width: 500px ) {
    .umbruch::before {
        content: "\A";
        white-space: pre;
    }
}
</style>

<p>Hier ein Umbruch <span class="umbruch"></span> nur über CSS je nach media querie</p>

Netter Trick. Ich frage mich aber immer noch: Wozu will man einen anderen Umbruch je nach Viewport?! Wenn Text geschickt platziert und ausgerichtet ist, sieht er auf jedem Viewport akzeptabel aus.

@Arne Drews

Kann ich dir sagen, für was man sowas braucht
Wenn du z.B. bei einem Logo noch Text hast, der normalerweise umgebrochen dargestellt werden soll ... genau dann.

Alles am Stück ist dann quasi die Alternative wegen wenig Platz, die man dann zur Not in Kauf nimmt.

Elemente je nach Fenstergröße untereinander oder nebeneinander anzuordnen, ist eine gängige Aufgabe bei einem responsiven Layout, wie z. B. hier:
Flexbox in der Flexbox

Unkonventionell ist lediglich der Ansatz des TO, dies über Zeilenumbrüche zu realisieren. Ebenfalls gebräuchlich ist dem gegenüber die Lösung, die ich in #5 beschrieben haben.

BTW: Wenn man es denn mit Zeilenumbrüchen regeln will, kann man auch direkt das br-Element ein- und ausschalten:

    <style>
        @media (min-width: 600px) {
            .testumbruch2 .dynbr {
                display: none;
            }
        }
    </style>
    <p class="testumbruch2">
        Lorem: ipsum<br class="dynbr">
        dolor sit amet: consetetur sadipscing elitr<br class="dynbr">
        sed diam: nonumyeirmod
    </p>

Zitat

Und da die Namen ja alle unterschiedliche lang sind, scheint mir die Umbruchvariante die hilfreichste

Flex kann durchaus mit unterschiedlichen Längen umgehen:

http://jsfiddle.net/Sempervivum/9haxj0o3/1/