Responsive Content Formatting - Display-abhängige Zeilenumbrüche - ein Workaround
Technisch oft vernachlässigt aber inhaltlich von Redakteuren häufig bemängelt werden Probleme bei der Steuerung oder ebene nicht-Steuerung von Zeilenumbrüchen abhängig von bestimmten Geräteklassen bzw. Displaygrößen. Dem Thema kann man sich in guter alter Manier der Internet Pionierzeit mit tollen Workarounds nähern. Gezielte Zeilenumbrüche anhand eines Beispiels:
Dieser Text liegt vor:
Ich möchte einen recht langen Text als Überschrift setzen und bestimmte Umbrüche steuern.
Wenn der Platz irgendwann schmaler wird möchte ich bestimmte Umbrüche vordefineren - wie es bei Marketingtexten häufig der Fall ist:
Version 1:
Ich möchte einen recht langen Text als Überschrift setzen und
bestimmte Umbrüche steuern.
Version 2:
Ich möchte einen
recht langen Text als
Überschrift setzen und
bestimmte Umbrüche steuern.
Dazu kann man Hidden-Linebreaks in den Text einfügen:
Ich möchte einen <span class="bp2"><br/>
</span>recht langen Text als <span class="bp2"><br/>
</span>Überschrift setzen und <span class="bp1"><br/>
</span>bestimmte Umbrüche steuern.
Per CSS lassen sich dann die Zeilenumbrüche aktivieren oder deaktivieren:
@media ( max-width : 599px) {
.bp1 { display: none; }
}
@media ( min-width : 600px) and (max-width: 767px) {
.bp2 { display: none; }
}
@media ( min-width : 768px) {
.bp1 { display: none; }
.bp2 { display: none; }
}
Die Eingabe für Redakteure müsste man sicherlich vom HTML entkoppeln und sich im jeweiligen WYSIWYG Editor ein tolles Spezialattribut einfallen lassen.
Aber für Kampagnen Sites und spezielle Bild-Text-Anordnungen aus der Werbung stammend, ist das sicherlich eine zielführende Variante.