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

17

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?

Scott
quelle

Antworten:

12

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 &nbsp;.

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 */
    }
}
Dom
quelle
4
Für etwas so Spezifisches wie das Beispiel in der Frage ist dies der
richtige
1
Dies scheint die einfachste und direkteste Methode zu sein. Vielen Dank.
Scott
6

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.

DA01
quelle
Dies. Wenn Sie es noch nicht gesehen haben, lesen Sie bitte hier ein Dao von Webdesign von John Allsopp: alistapart.com/article/dao
bemdesign
3

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();

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.

user56reinstatemonica8
quelle
Keine Ahnung, aber die GitHub-Seite enthält eine Beschreibung der Funktionsweise. Klingt so, als ob nur die DOM-Suche und grundlegende Manipulationsfunktionen verwendet werden, sodass Sie möglicherweise nicht mehr nur Sizzle (das Auswahlbit von jQuery) verwenden müssen, um die Elemente nach Bedarf zu manipulieren. Aber das könnte leicht zu einer
Menge
Ich könnte mir vorstellen, dass dies der "Algorithmus" ist, der am Anfang der Readme-Datei beschrieben wurde. Sie sagen lediglich, dass sie jQuery verwendet haben, um die browserübergreifende Kompatibilität zu vereinfachen.
user56reinstatemonica8
@DumbNic Wenn Sie über die Größe von jQuery besorgt sind, können Sie versuchen, Zepto.js zu verwenden , aber ich bin nicht 100% sicher, dass es mit diesem Plugin nativ funktioniert. Ich glaube nicht, dass es eine Vanille js-Version gibt (obwohl es möglich ist, eine zu machen)
Zach Saucier
Mystery downvote ... Ich denke, jemand mag jQuery wirklich nicht
user56reinstatemonica8
3

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.

Joel M.
quelle
2

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.

Steve
quelle
1
Dies ist sehr schwierig und erfordert viel Rechenaufwand. Ich empfehle diesen Ansatz nicht
Zach Saucier
Die Frage scheint sich geändert zu haben. Ich gab die Antwort auf die Frage, die er damals gab, und die Zeilenumbrüche dort anzuzeigen, wo er sie haben wollte.
Steve
Ich habe die "gewünschten Zeilenumbrüche" angesprochen. Ich gab ihm eine theoretische JS-Implementierung, um zu bekommen, was er will. Mein zweiter Absatz sagt jedoch meine Position und ich bin gegen diesen Ansatz. RWD ist der richtige Weg, und genau das verwende ich in meinen Apps.
Steve
2

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.

Scott
quelle
Hinweis: Sie können sich margin: 0 auto; text-align: center;nur einmal außerhalb einer Medienabfrage bewerben.
Zach Saucier,
1
Außerdem ist es wahrscheinlich besser, nur innere Bereiche zu verwenden, wenn dies für den Inhalt spezifisch ist ... All dieses CSS ist ein bisschen viel, und sobald Sie die Schriftgröße oder ähnliches ändern, muss alles entsprechend geändert werden
Zach Saucier
Einverstanden. Schriftgrößen werden für alle Mediengrößen globaler gesteuert. Dies war nur ein Beispiel für das Markup.
Scott
1

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

Tom Esterez
quelle