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

Ich entwerfe eine Menge einfacher, einseitiger Web-Artikel für den Verkauf oder per E-Mail. Ich stoße häufig auf Probleme mit Überschriften und den gewünschten Zeilenumbrüchen bei verschiedenen Medienbreiten.

Zum Beispiel könnte ich eine Überschrift haben wie:

Unser New thingamabob ist das Beste seit geschnittenem Brot!

Ohne auf Zeilenumbrüche zu achten, wird die Zeile folgendermaßen umbrochen:

Unser New thingamabob ist das Beste seit
geschnittenem Brot!

Bei voller Webgröße möchte ich die Zeile nach "the" brechen. Zwei Linien erstellen.

Unser New thingamabob ist das
Beste seit geschnittenem Brot!

Für einen Bildschirm mit mittlerer Breite würde ich zweimal brechen:

Unser New thingamabob
ist das Beste
seit geschnittenem Brot!

Bei noch schmaleren Bildschirmen würde ich nach "new", nach "thingamabob" und nach "thing" brechen. Vier Zeilen erstellen.

Unser New
thingamabob
ist das Beste
seit geschnittenem Brot!

Ich wirklich nicht will , Umbrüche verwenden ( <br>) , weil die hart-Sets der Pausen in allen Größen. Bis jetzt habe ich Medienanfragen und Breite Prozentsätze für die verschiedenen verwendeten h1- h5Tags , so dass die Breite der Tag Kräfte eine Pause. Aber das scheint mir "hacky" (es ist auch manchmal sehr temperamentvoll, basierend auf dem tatsächlichen Text).

Was ist der beste Weg, um Zeilenumbrüche zu kontrollieren, ohne sie fest in HTML zu programmieren?

Ich rate 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 so weit wie möglich in vertretbaren Grenzen gesteuert werden . JavaScript oder zusätzliche unnötige Elemente sind keine "angemessenen Grenzen" .

Non-Breaking Spaces dagegen ... können hilfreich sein, wenn sie in Maßen verwendet werden.
Wenn Sie sie zwischen den Wortpaaren und Drillingen platzieren, die Sie zusammenhalten möchten, können Sie die gewünschten Ergebnisse erzielen.

Abhängig von der Länge der Wörter, die Sie verwenden, können Sie jedoch nicht viele nacheinander verwenden. Wenn Sie zu viele verknüpfen, wird der Text aus dem Ansichtsfenster oder seinem Container überlaufen.

Ein kurzes Experimentieren mit Ihren eigenen Wörtern sollte die besten zu verlinkenden Wörter aufzeigen.

Für das Beispiel in dieser Frage könnte der HTML-Code folgendermaßen 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 Beispiel, das ich erstellt habe, ist nur zum Spaß.

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

Nachdem ich die Frage noch einmal gelesen hatte, wurde mir klar, dass ich die Anforderungen nicht ganz erfüllte. Für diesen speziellen Fall und unter der Annahme, dass es andere Seiten gibt, die die gleiche Aufmerksamkeit erfordern, würde ich einen einzelnen <br>für einen Haltepunkt 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 bei etwas kleinerem als der vollen Breite zusammenbrechen, und zwar so, als wäre sie nicht einmal dort, und zwar unter Verwendung von Medienabfragen. Bei Darstellungsfeldgrößen, die kleiner als die volle Breite sind, verlassen wir uns nur auf die  .

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

Der HTML:

<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, zu erkennen, dass Sie keine wirkliche Kontrolle über Zeilenumbrüche im Web haben, und es ist am besten, dies zu berücksichtigen.

Jede gegenteilige Lösung muss ausnahmslos hacky sein. Da es wird ein Hack als HTML definierte Benutzerzeilenumbrüche außerhalb der harten haftet nicht Codierung. Sie könnten es mit JS ziemlich leicht tun. Richten Sie Ihre Haltepunkte mit leeren Abschnitten mit eindeutigen Klassen ein und verwenden Sie dann die Ansichtsfenstergröße, mit der Sie BR-Tags in jeden gewünschten Abschnitt einfügen können.

Es gibt einige CSS-Stile, die in neueren Browsern verwendet werden können, um den Zeilenumbruch im Browser zu steuern. In dieser Situation erhalten Sie jedoch nicht die exakte Kontrolle, die Sie suchen.

Auf der anderen Seite würde ich die Breite des DIV für jedes Ansichtsfenster unterschiedlich einstellen, wenn Ihr Ziel nicht darin besteht, bestimmte Zeilenumbrüche zu kontrollieren, sondern sicherzustellen, dass sich Ihr Textblock in relativ geraden Zeilen stapelt. Es wird nicht perfekt sein, aber wahrscheinlich ziemlich nahe und könnte der beste Kompromiss sein.

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

Es handelt sich um ein von Adobe erstelltes Plug-in, das zusammen mit dem Vorschlagtext-wrap: balance; von Adobe erstellt wurde , eine CSS-Option zu erhalten , die genau dies ermöglicht, wie die Funktion „Balance Ragged Lines“ von Adobe InDesign (hört sich toll an, aber selbst wenn sie akzeptiert wird, wird es Jahre dauern, bis die Browser dies unterstützen).

Das Plugin funktioniert jedoch gerade. Es gleicht alle Elemente aus, die die Klasse balance-texthaben oder jQuery like verwenden$('.some-elements').balanceText();

• Hier ist eine offizielle Adobe-Demo , in der berechtigter Text verwendet wird .

• Hier ist eine Demo, die ich mit linksbündigem <h1>s gemacht 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 für Text in Tags auf Blockebene ohne Inline-Elemente.

Im Demo - 4 Sie werden sehen , wie alles in dem Block von ausgewogenem Text wie ein <a>Link, <span>s oder Betonung wie <em>, <strong>, <b>, <i>wird etc entfernt.

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

Es scheint mäßig zuverlässig, aber manchmal unangenehm zu sein - zum Zeitpunkt des Schreibens rutscht es gelegentlich aus, wenn es sich in einer Seitenspalte befindet und einsame Waisenkinder zurücklassen (aber es scheint in 95% der Fälle zu funktionieren und ich habe es noch nicht gesehen, außer In einer Seitenspalte) und aus ungeklärten Gründen funktionieren meine Demos nicht mit Firefox, aber mit den Demos von Adobe (in IE9 + in Ordnung, kann derzeit nicht in IE8 getestet werden). Wenn Sie es verwenden, müssen Sie einige Testzeiten einkalkulieren.

Ich muss mich etwas regelmäßig damit auseinandersetzen, mit Beiträgen von Designern, die wollen, dass die Dinge auf eine bestimmte Weise brechen. Ich habe herausgefunden, dass es am einfachsten ist, einen Bereich mit einer Klasse in den Text einzufügen und diesen Bereich dann display: block;für die Medienabfragen zu verwenden.

So würde es 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 durcharbeiten 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 Ihre eigenen Zeilenumbruchklassen nach Twitter Bootstrap oder dem von Ihnen verwendeten Rastersystem erstellen und die Klassennamen nach der von Ihnen verwendeten Namenskonvention modellieren.

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

Leider passen "gewünschte Webbrüche" und "Best Web Practices" nicht zusammen. Lassen Sie Ihren perfektionistischen Wunsch los, jedes Wort an die richtige Stelle zu bringen - es gibt einfach zu viele Bildschirmmöglichkeiten und zu viele Leser, die nicht die Designer-Einstellung haben, die Sie brauchen, um Zeilenumbrüche in ihren Titeln zu beachten. Lesen Sie Responsive Web Design, um diese Probleme besser zu verstehen.

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 manchmal müssen einige Anpassungen basierend auf tatsächlichen Text verwendet wird, aber dies ist das allgemeine Schema I verwendet werden . Reduzieren Sie im Wesentlichen die Breite des h1Tags, sodass die Zeile dort umbrochen wird, wo sie umgebrochen werden soll.

Dies funktioniert, es sind nur gründliche Tests erforderlich, um sicherzustellen, dass an den gewünschten Stellen Pausen auftreten. Dann sind aber auf jeden Fall gründliche Tests erforderlich. Es ist also nicht unbedingt mehr Arbeit in dieser Hinsicht.

Sie können an den Stellen, an denen Zeilenumbrüche zulässig sein sollen, Zeilen hinzufügen white-space: nowrapund platzieren <wbr>. Wenn dies nicht ausreicht und Sie eine genaue Kontrolle über Medienabfragen wünschen, können Sie dennoch Klassen wie hinzufügen<wbr class="mobileOnly">

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