Was sind die Best Practices für den Umgang mit gewünschten Zeilenumbrüchen im responsiven Webdesign?

Ich empfehle dies nur auf der Grundlage, dass es für kurze Textausschnitte und nicht für Absätze verwendet wird.

Die Formatierung von Überschriften kann und sollte in vernünftigen Grenzen so weit wie möglich kontrolliert werden . JavaScript oder zusätzliche unnötige Elemente sind nicht ganz "angemessene Grenzen" .

Geschützte Leerzeichen hingegen ... können nützlich sein, wenn sie in Maßen verwendet werden.
Wenn Sie sie zwischen die Wortpaare und -tripel setzen, die Sie zusammenhalten möchten, können Sie die gewünschten Ergebnisse erzielen.

Sie können jedoch nicht viele nacheinander verwenden, abhängig von der Länge der Wörter, die Sie verwenden. Das Verknüpfen zu vieler führt dazu, dass der Text aus dem Ansichtsfenster oder seinem Container überläuft.

Ein kurzes Experimentieren mit Ihrem eigenen Satz von Wörtern sollte die besten Wörter zum Verknüpfen aufdecken.

Für das Beispiel in dieser Frage könnte der HTML-Code so aussehen:

<span>Our&nbsp;New thingamabob is&nbsp;the best&nbsp;thing since&nbsp;sliced&nbsp;bread!</span>

Hier ist eigentlich kein CSS notwendig. Das CSS in diesem von mir erstellten Beispiel dient nur zum Spaß.

Kurz gesagt, der Schlüssel zu dieser Methode besteht darin, die Anzahl der Stellen zu begrenzen, an denen der Text umbrechen darf.

Nachdem ich die Frage noch einmal gelesen habe, stelle ich fest, dass ich die Anforderungen nicht ganz erfüllt habe. Für diesen speziellen Fall und unter der Annahme, dass es andere Seiten gibt, die die gleiche Aufmerksamkeit erfordern, würde ich einen einzigen <br>für einen Haltepunkt in voller Breite definieren. Ich würde dann dieselbe Klasse auf jeder der Seiten an der idealsten Stelle in der Überschrift wiederverwenden.

Diese <br>Klasse würde unter Verwendung von Medienabfragen bei etwas kleiner als der vollen Breite zusammenbrechen und so tun, als ob sie nicht einmal da wäre. Bei Ansichtsfenstergrößen von weniger als der vollen Breite verlassen wir uns  allein auf die .

Ein weiteres Beispiel mit einer Single<br> , die näher an der Marke liegt.

Der HTML-Code:

<span>
    Our&nbsp;New thingamabob is&nbsp;the<br class="full-width-breakpoint"/> best&nbsp;thing since&nbsp;sliced&nbsp;bread!
</span>

Das CSS:

@media screen and (max-width:550px) {    /* Max Width depends on your design */     
    .full-width-breakpoint {             /* only experimentation or */
        display:none;                    /* calculation will reveal */
        line-height:0;                   /* the best max-width */
    }
}

Die beste Vorgehensweise besteht darin, anzuerkennen, dass Sie keine wirkliche Kontrolle über Zeilenumbrüche im Web haben, und es ist am besten, dies im Hinterkopf zu behalten.

Jede gegenteilige Lösung muss ausnahmslos hacky sein. Da es ein Hack sein wird , da HTML außerhalb der Hartcodierung keine benutzerdefinierten Zeilenumbrüche einhält. Mit JS geht das ganz einfach. Richten Sie Ihre Unterbrechungspunkte mit leeren Spannen mit eindeutigen Klassen ein, und basierend auf der Größe des Ansichtsfensters können Sie BR-Tags in jede gewünschte SPAN einfügen.

Es gibt einige CSS-Stile, die in neueren Browsern funktionieren, um zu steuern, wie der Browser Zeilenumbrüche handhabt, aber es gibt Ihnen immer noch nicht die genaue Kontrolle, die Sie in dieser Situation suchen.

Wenn Ihr Ziel andererseits nicht so sehr darin besteht, bestimmte Zeilenumbrüche zu steuern, sondern sicherzustellen, dass Ihr Textblock in relativ gleichmäßigen Zeilen "gestapelt" wird, würde ich die Breite des DIV für jedes Ansichtsfenster unterschiedlich einstellen. Es wird nicht perfekt sein, aber wahrscheinlich ziemlich nah dran und könnte der beste Kompromiss sein.

Dafür gibt es ein jquery-Plugin, Balance Text .

Es ist ein von Adobe erstelltes Plugin, das neben dem Vorschlag von Adobe erstellt wurde, eine CSS-Option zu erhaltentext-wrap: balance; , die genau dies tun würde, wie die Funktion Balance Ragged Lines von Adobe InDesign (klingt großartig, aber selbst wenn es akzeptiert wird, wird es Jahre dauern, bis Browser es unterstützen).

Das Plugin funktioniert aber momentan. Es gleicht alle Elemente aus, die die Klasse haben balance-text, oder jQuery wie verwenden$('.some-elements').balanceText();

• Hier ist eine offizielle Adobe-Demo mit Blocksatz .

• Hier ist eine Demo, die ich mit linksbündigem <h1>s erstellt habe - drücken Sie Bearbeiten, um den Code zu sehen. Dies zeigt einige der Einschränkungen zum Zeitpunkt des Schreibens:

Einschränkungen

Dieser Code funktioniert derzeit nur mit Text in Tags auf Blockebene ohne Inline-Elemente.

In Demo 4 sehen Sie, wie alles innerhalb Ihres Blocks mit ausgewogenem Text wie <a>Links, <span>s oder Hervorhebungen wie <em>, <strong>, <b>, <i>usw. entfernt wird.

Wenn Sie die Demos 1, 2 und 5 vergleichen, werden Sie außerdem feststellen, dass Sie anscheinend sowohl die CSS-Klasse als auch den jQuery-Aufruf verwenden müssen.

Es scheint mäßig zuverlässig, aber manchmal fehlerhaft zu sein - zum Zeitpunkt des Schreibens rutscht es gelegentlich aus, wenn es in einer Seitenspalte steht, und hinterlässt einsame Waisenkinder (aber es scheint in mehr als 95 % der Fälle zu funktionieren, und ich habe es noch nicht gesehen, außer wenn in einer Seitenspalte), und aus unerklärlichen Gründen funktionieren meine Demos nicht auf Firefox, aber die Demos von Adobe tun es (gut in IE9+, kann im Moment nicht in IE8 getestet werden). Wenn Sie es verwenden, kalkulieren Sie etwas Testzeit ein.

Sie können JavaScript verwenden, um die Bildschirmbreite zu erkennen und die korrekte Version (mit < br> 's, wie Sie sie in Ihrem Beitrag haben) über innerHTML in ein leeres div zu schreiben.

Leider passen „gewünschte Bahnunterbrechungen“ und „beste Webpraktiken“ nicht zusammen. Lassen Sie Ihren perfektionistischen Wunsch los, jedes Wort an der richtigen Stelle zu platzieren – es gibt einfach zu viele Bildschirmmöglichkeiten und zu viele Leser, die nicht die Designer-Mentalität haben, die Sie brauchen, um sich um Zeilenumbrüche in ihren Titeln zu kümmern. Schlagen Sie Responsive Webdesign nach, um diese Probleme besser zu verstehen.

Ich muss mich ziemlich regelmäßig damit auseinandersetzen, mit Input von Designern, die wollen, dass die Dinge auf eine bestimmte Weise brechen. Ich habe festgestellt, dass dies am einfachsten möglich ist, indem eine Spanne mit einer Klasse in den Text eingefügt wird und diese Spanne dann display: block;für die Medienabfragen verwendet wird.

Das würde also ungefähr so ​​aussehen:

<p>This is some text and I want <span class="mobile-only-line-break">only this text to break, but only on mobile</span></p>

Dann hätte ich CSS mit so etwas:

@media all and (max-width: 767px) {
.mobile-only-line-break { 
display: block;
}
}

Sie müssen es noch durchgehen und verfeinern, um sicherzustellen, dass die Dinge für alle Breiten so brechen, wie Sie es möchten.

Wenn es ein häufiges Problem ist, können Sie Ihren eigenen Satz von Zeilenumbruchklassen a la Twitter Bootstrap oder das von Ihnen verwendete Grid-System erstellen und die Klassennamen nach der von Ihnen verwendeten Namenskonvention modellieren.

Meine aktuelle Methode...

<h1>Our New thingamabob is the best thing since sliced bread!</h1>

Und das CSS:

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
   h1 { margin: 0 auto; text-align: center; width: 280px; }
}

@media only screen 
and (min-width : 321px) {
    h1 { margin: 0 auto; text-align: center; width: 280px; }
}


@media only screen 
and (max-width : 320px) {
    h1 { margin: 0 auto; text-align: center; width: 280px; }
}


@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
    h1 { margin: 0 auto; text-align: center; width: 550px; }
}


@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
    h1 { margin: 0 auto; text-align: center; width: 800px; }
}


@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
    h1 { margin: 0 auto; text-align: center; width: 550px; }
}


@media only screen 
and (min-width : 1224px) {
    h1 { margin: 0 auto; text-align: center; width: 800px; }
}

/* Large screens ----------- */
@media only screen 
and (min-width : 1824px) {
    h1 { margin: 0 auto; text-align: center; width: 1200px; }
}


@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
    h1 { margin: 0 auto; text-align: center; width: 280px; }
}

Breiten müssen manchmal angepasst werden, basierend auf dem tatsächlich verwendeten Text, aber dies ist das allgemeine Schema, das ich verwende. Verringern Sie im Wesentlichen die Breite des h1Tags, sodass die Zeile an der Stelle unterbrochen wird, an der sie unterbrochen werden soll.

Dies funktioniert, es muss nur gründlich getestet werden, um sicherzustellen, dass die Unterbrechungen dort auftreten, wo es gewünscht ist. Dann sind aber in jedem Fall gründliche Tests erforderlich. Es ist also nicht unbedingt mehr Arbeit in dieser Hinsicht.

Sie können an den Stellen, an denen Sie Zeilenumbrüche zulassen möchten, hinzufügen white-space: nowrapund platzieren . <wbr>Wenn dies nicht ausreicht und Sie eine Feinsteuerung mit Medienabfragen wünschen, können Sie immer noch Klassen wie hinzufügen<wbr class="mobileOnly">

<wbr>doc: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/wbr