html (+ css): Bezeichnet einen bevorzugten Ort für einen Zeilenumbruch

108

Angenommen, ich habe diesen Text, den ich in einer HTML-Tabellenzelle anzeigen möchte:

Honey Nut Cheerios, Wheat Chex, Grape-Nuts, Rice Krispies, Some random cereal with a very long name, Honey Bunches of Oats, Wheaties, Special K, Froot Loops, Apple Jacks

und ich möchte, dass die Zeile vorzugsweise nach einem der Kommas unterbrochen wird.

Gibt es eine Möglichkeit, den HTML-Renderer anzuweisen, an einer bestimmten Stelle zu brechen, und dies zuerst, bevor er versucht, nach einem der Leerzeichen zu brechen, ohne nicht brechende Leerzeichen zu verwenden? Wenn ich nicht unterbrechende Leerzeichen verwende, wird die Breite bedingungslos größer. Ich möchte, dass der Zeilenumbruch nach einem der Leerzeichen erfolgt, wenn der Zeilenumbruchalgorithmus es zuerst mit den Kommas versucht hat und die Zeile nicht passen kann.

Ich habe versucht, Textfragmente in <span>Elemente zu verpacken, aber das scheint nichts hilfreiches zu sein.

<html>
  <head>
      <style type="text/css">
        div.box { width: 180px; }
        table, table td { 
          border: 1px solid; 
          border-collapse: collapse; 
        }
      </style>
  </head>
  <body>
    <div class="box">
      <table>
      <tr>
          <td>lorem ipsum</td>
          <td>lorem ipsum</td>
          <td>lorem ipsum</td>
      </tr>
      <tr>
          <td>lorem ipsum</td>
          <td>
            <span>Honey Nut Cheerios,</span>
            <span>Wheat Chex,</span>
            <span>Grape-Nuts,</span>
            <span>Rice Krispies,</span>
            <span>Some random cereal with a very long name,</span>
            <span>Honey Bunches of Oats,</span>
            <span>Wheaties,</span>
            <span>Special K,</span>
            <span>Froot Loops,</span>
            <span>Apple Jacks</span>
          </td>
          <td>lorem ipsum</td>
      </tr>
      </table>
    </div>
  </body>
</html>

Hinweis: Es sieht so aus, als ob das CSS3-text-wrap: avoid Verhalten das ist, was ich will, aber ich kann es scheinbar nicht zum Laufen bringen.

Jason S.
quelle
Sie können unterbrechende Leerzeichen innerhalb der Bereiche verwenden.
Gabriele Petrioli
3
Aber ich möchte keine nicht unterbrechenden Leerzeichen verwenden. Ich würde gerne Räume verwenden, in denen ich nicht hier brechen möchte, aber ich werde es tun, wenn ich muss, aber soweit ich weiß, existieren diese.
Jason S
@ Jason .. ich fühle dich .. aber es ist nicht möglich .. fügte eine Antwort hinzu.
Gabriele Petrioli
Das passiert, wenn Informatiker Rendering-Algorithmen ohne Eingabe von Typographen schreiben.
Jason S
1
Sie sollten die Antwort von @ EggertJóhannesson akzeptieren, da dies eine gute Problemumgehung darstellt!
Gabriele Petrioli

Antworten:

156

Durch die Nutzung

span.avoidwrap { display:inline-block; }

und den Text einpacken, in dem ich zusammengehalten werden möchte

<span class="avoidwrap"> Text </span>

Es wird zuerst in bevorzugte Blöcke und dann nach Bedarf in kleinere Fragmente eingewickelt.

Eggert Jóhannesson
quelle
16
Funktioniert super! Nur eine zusätzliche Anmerkung: Leerzeichen am Anfang und am Ende eines Inline-Blocks werden ignoriert. Um Text in Blöcken durch Leerzeichen abzugrenzen, müssen Sie ihn zwischen Inline-Blöcken platzieren. Wenn zum Beispiel Bereiche so gestaltet wurden, dass sie zu Inline-Blöcken <span>Hello </span><span> world</span>werden Helloworld, ist und <span>Hello</span> <span>world</span>ist dies normal Hello world.
Benutzer
2
<wbr> ist semantischer und überlässt die Kontrolle im Browser, was im Allgemeinen eine gute Sache ist. In diesem Fall ist das Brechen möglich, wenn es wichtig ist.
Lodewijk
Funktioniert super - wenn es wichtig ist, dass Zeichen wie "-" nicht brechen. Beispiel: Perikles <span class = "Avoidwrap"> (um 500-429 v.Chr.) </ Span>
Sarah Trees
10
@Lodewijk: Gibt <wbr>keinen bevorzugten Ort zum Brechen der Linie an, sondern einen möglichen .
Dan Dascalescu
1
Beachten Sie, dass diese Technik auch für verschachtelte <span>s funktioniert , sodass Sie (praktisch) eine Hierarchie bevorzugter Haltepunkte angeben können .
Michael Dyck
24

Es gibt eine sehr nette RWD-Lösung von Dan Mall , die ich bevorzuge. Ich werde es hier hinzufügen, da einige andere Fragen zu reaktionsschnellen Zeilenumbrüchen als Duplikate dieser markiert sind.
In Ihrem Fall hätten Sie:

<span>Honey Nut Cheerios, <br class="rwd-break">Wheat Chex, etc.</span>

Und eine Zeile CSS in Ihrer Medienabfrage:

@media screen and (min-width: 768px) {
    .rwd-break { display: none; }
}
Stephan Weinhold
quelle
7

Eine einfache Antwort ist die Verwendung des Leerzeichens mit der Breite Null.&#8203; Es wird verwendet, um an bestimmten Stellen Zwischenräume innerhalb von Wörtern zu erstellen .

Hat das genaue Gegenteil des nicht unterbrechenden Raums &nbsp; (naja, eigentlich der Wort-Joiner &#8288; ) ( Word-Joiner ist die Version des nicht unterbrechenden Raums mit der Breite Null )

(Es gibt auch andere nicht brechende Codes wie den nicht brechenden Bindestrich &#8209; ) (hier ist eine ausführliche Antwort auf verschiedene 'Varianten' von nbsp )

Wenn Sie eine reine HTML-Lösung (kein CSS / JS) wünschen, können Sie eine Kombination aus dem Raum mit der Breite Null und dem Raum ohne Unterbrechung verwenden . Dies wäre jedoch sehr unübersichtlich , und das Schreiben einer für Menschen lesbaren Version erfordert einen geringen Aufwand .

ctrl+ c, ctrl+ vhilft

Beispiel:

   Honey&nbsp;Nut&nbsp;Cheerios,<!---->&#8203;<!--
-->Wheat&nbsp;Chex,<!---->&#8203;<!--
-->Grape&#8209;Nuts,<!---->&#8203;<!--
-->Rice&nbsp;Krispies,<!---->&#8203;<!--
-->Some&nbsp;random&nbsp;cereal&nbsp;with&nbsp;a&nbsp;very&nbsp;long&nbsp;name,<!---->&#8203;<!--
-->Honey&nbsp;Bunches&nbsp;of&nbsp;Oats,<!---->&#8203;<!--
-->Wheaties,<!---->&#8203;<!--
-->Special&nbsp;K,<!---->&#8203;<!--
-->Froot&nbsp;Loops,<!---->&#8203;<!--
-->Apple&nbsp;Jacks

unlesbar? Dies ist derselbe HTML-Code ohne Kommentar-Tags:

   Honey&nbsp;Nut&nbsp;Cheerios,&#8203;Wheat&nbsp;Chex,&#8203;Grape&#8209;Nuts,&#8203;Rice&nbsp;Krispies,&#8203;Some&nbsp;random&nbsp;cereal&nbsp;with&nbsp;a&nbsp;very&nbsp;long&nbsp;name,&#8203;Honey&nbsp;Bunches&nbsp;of&nbsp;Oats,&#8203;Wheaties,&#8203;Special&nbsp;K,&#8203;Froot&nbsp;Loops,&#8203;Apple&nbsp;Jacks

Da das Rendern von E-Mail-HTML-Dateien jedoch nicht vollständig standardisiert ist, eignet es sich für diese Art der Verwendung, da diese Lösung kein CSS / JS verwendet

Wenn Sie dies in Kombination mit einer der <span>basierten Lösungen verwenden, haben Sie außerdem die vollständige Kontrolle über den Zeilenumbruchalgorithmus

(Anmerkung der Redaktion :)

Das einzige Problem, das ich sehen konnte, war, wenn Sie die Punkte des bevorzugten Bruchs dynamisch ändern wollten. Dies würde eine ständige JS-Manipulation jeder der proportionalen Größenbereiche erfordern und diese HTML-Entitäten im Text verarbeiten müssen.

Gemeinschaft
quelle
1
Was sind Span Hacks?
Jason S
Die anderen Antworten nutzen Span-Tags.
Ich möchte auch darauf hinweisen, dass diese Lösung zwar nicht die einfachste, aber die zuverlässigste zu sein scheint, da diese Entitäten die semantische Darstellung in Browsern, E-Mail-Parsern oder anderen HTML-Parsern nicht häufig ändern und nicht ändern sollten.
3

Die Antwort lautet Nein ( Sie können den verwendeten Zeilenumbruchalgorithmus nicht ändern ).

Es gibt jedoch einige Problemumgehungen (die beste ist die akzeptierte Antwort ).

Sie können sich dem nicht unterbrechenden Leerzeichen nähern, &nbsp;aber nur zwischen Wörtern, die zusammenpassen ( was Sie in Spannen haben, aber nicht nach dem Komma ), oder Sie können das white-space:nowrapals @Marcel erwähnte verwenden.

Beiden Lösungen das gleiche tun, und beide werden nicht eine Gruppe von Worten brechen , wenn es nicht selbst paßt.

Gabriele Petrioli
quelle
argh. :-( das stinkt, es bedeutet, dass ich entweder damit leben muss oder ich muss versuchen, lange Zeilen selbst zu erkennen, um den Zeilenumbruch-Algorithmus zu besiegen.
Jason S
Ich habe Ihre Antwort bearbeitet, um einen Link zur Problemumgehung bereitzustellen, da ich aufgrund der Formulierung Ihrer ersten Zeile fast nicht weiter gelesen habe.
Arootbeer
@arootbeer: Ich unterstütze deine Bearbeitung, aber Gaby hat sie zurückgesetzt. Gaby: warum? Möchten Sie Benutzer irreführen?
Dan Dascalescu
@DanDascalescu, sollte alle Antwort SO geändert werden, um auf die akzeptierte auf derselben Seite zu verweisen? Meine Antwort hat 1 ( Summen- ) Stimme und es gibt eine akzeptierte Antwort mit 48 Stimmen. Ich bin mir ziemlich sicher, dass der Akzeptierte derjenige ist, der die Aufmerksamkeit erhält ( und das zu Recht ). Außerdem bestehe ich darauf, dass es keine Möglichkeit gibt, den verwendeten Breaking-Algorithmus zu ändern ( wie es das OP verlangt )
Gabriele Petrioli
1
Überprüfen Sie, ob meine Lösung Ihre eigene Logik gegen Sie verwendet.
2

Mit Ihrem oben genannten Aufschlag verwenden span { white-space:nowrap }. Es ist so gut, wie man es wirklich erwarten kann.

Marcel
quelle
Danke, aber das wird nicht funktionieren, da es im Grunde genommen Leerzeichen innerhalb eines spanElements in übersetzt &nbsp;und verhindert, dass die Leerzeichen überhaupt brechen. Ich möchte den Renderer nur davon abhalten, zwischen einem meiner Elemente einzubrechen, aber wenn dies erforderlich ist, möchte ich, dass dies der Fall ist.
Jason S
@ Jason S: Ich habe meiner Antwort weitere Optionen hinzugefügt.
Marcel
Wie &nbsp;<wbr>unterscheidet sich ein Raum? Nach allem, was ich sagen kann, kann man entweder wählen, ob ein bestimmter Charakter eine Pause zulässt oder nicht. Also erlauben '-' und '' und &#8203;und <wbr>und &shy;alle eine Pause (Drucken eines Bindestrichs, Leerzeichens, Nichts, Nichts und Bindestrichs nur bei Pause), während &nbsp;dies nicht der Fall ist.
Jason S
@ Jason S: Beispielverwendung hinzugefügt.
Marcel
Ich habe es gerade versucht, und es scheint keine Priorität vor Leerzeichen für Zeilenumbrüche zu haben. Die Priorität ist was ich brauche. Wenn das Bruchverhalten für ein anderes Zeichen oder Element entweder Ja oder Nein ist, gibt es keine Lösung für mein Problem. Wenn es relative Prioritäten für Zeilenumbrüche gibt, habe ich möglicherweise eine Lösung.
Jason S
0

Neue Antwort jetzt haben wir HTML5:

HTML5 führt das <wbr>Tag ein. (Es steht für Word Break Opportunity.)

Durch Hinzufügen von a <wbr>wird der Browser angewiesen, dort vor einer anderen Stelle zu brechen, sodass Wörter nach Kommas leicht unterbrochen werden können:

Honey Nut Cheerios,<wbr> Wheat Chex,<wbr> Grape-Nuts,<wbr> Rice Krispies,<wbr> Some random cereal with a very long name,<wbr> Honey Bunches of Oats,<wbr> Wheaties,<wbr> Special K,<wbr> Froot Loops,<wbr> Apple Jacks

Es wird von allen gängigen Browsern außer IE unterstützt.

ACarter
quelle
12
-1. Warum haben Sie nicht vor der Beratung getestet? Es funktioniert nicht. <wbr>hat einen anderen Zweck. Ganz zu schweigen davon, dass diese Antwort ein Duplikat einer Antwort ist , die lange zuvor existiert hat.
Benutzer
1
WBR hat keinen anderen Zweck. developer.mozilla.org/en-US/docs/Web/HTML/Element/wbr
Lodewijk
13
<wbr>richtet nur eine Pausenmöglichkeit ein; Es sagt dem Browser nicht, dass er dort vorher irgendwo anders kaputt gehen soll. Wird vor einem Leerzeichen verwendet, ist es normalerweise nutzlos, da Leerzeichen normalerweise Zeilenumbruchmöglichkeiten sind.
Jukka K. Korpela
5
Dies funktioniert in keinem Browser. Die Antwort ist falsch: <wbr>nicht nicht einen Zeilenumbruch über gewöhnliche Leerzeichen priorisieren. Das Wickeln geschieht im Beispiel also wie gewohnt.
Adrian
3
Zur Verdeutlichung soll <wbr> signalisieren, dass "hier ein Ort ist, den Sie brechen können", wenn diese Position ansonsten in einem Wort berücksichtigt würde . Es heißt "Behandle die Stelle zwischen diesen beiden Zeichen so, als ob dort ein Leerzeichen wäre", nicht "ziehe es vor, hier zu brechen". Wenn bereits ein Leerzeichen vorhanden ist, hat <wbr> keine Bedeutung.
Semikolon
-1

Sie können einfach die Randeinstellungen in CSS anpassen (in diesem Fall rechtsrand).

text {
    margin-right: 20%;
}
Gooflord
quelle
-3

Verwenden Sie <div>anstelle von <span>oder geben Sie eine Klasse für SPAN an und geben Sie ihr das Attribut display: block .

Justacoder
quelle
-5

Dafür gibt es ein HTML-Element: das (jetzt standardisierte) <wbr>Element .

Ich würde Ihnen raten, das zu verwenden. Es funktioniert vielleicht nicht überall , aber es ist das Beste, was Sie tun können, ohne durch Reifen zu gehen.

Mathias Bynens
quelle
3
-1: <wbr>dient zum Markieren von Unterbrechungspunkten bei sehr langen Wörtern, löst das Problem mit bevorzugten Zeilenumbrüchen nicht
Benutzer
4
@ user3075942 Direktes Zitat aus der Spezifikation : "Das wbrElement repräsentiert eine Zeilenumbruchmöglichkeit." Das ist genau das, was OP gefragt. Hören Sie auf, Leute basierend auf dem, was Sie in Wikis lesen, herunterzustimmen.
Mathias Bynens
3
Ja, Gelegenheit . Browser haben jedoch bereits die Möglichkeit, an Leerzeichen zu brechen. Die Frage ist, wie man einem Browser sagt, an welchen Stellen es vorzuziehen ist, zu brechen.
Benutzer
1
… Und die Antwort ist zu verwenden <wbr>.
Mathias Bynens
8
Nein, das ist nicht die Antwort. Dies erhöht nicht die Wahrscheinlichkeit für die Verwendung einer bestimmten bereits vorhandenen Haltepunktmöglichkeit. Es wird nur eine neue Haltepunktmöglichkeit hinzugefügt, wenn noch keine vorhanden ist. Zwei Möglichkeiten hintereinander zu haben, nützt nichts. developer.mozilla.org/en-US/docs/Web/HTML/Element/wbr
Torin Finnemann