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 Jacksund 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.
Antworten:
Durch die Nutzung
und den Text einpacken, in dem ich zusammengehalten werden möchte
Es wird zuerst in bevorzugte Blöcke und dann nach Bedarf in kleinere Fragmente eingewickelt.
quelle
<span>Hello </span><span> world</span>werdenHelloworld, ist und<span>Hello</span> <span>world</span>ist dies normalHello world.<wbr>keinen bevorzugten Ort zum Brechen der Linie an, sondern einen möglichen .<span>s funktioniert , sodass Sie (praktisch) eine Hierarchie bevorzugter Haltepunkte angeben können .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:
Und eine Zeile CSS in Ihrer Medienabfrage:
quelle
Eine einfache Antwort ist die Verwendung des Leerzeichens mit der Breite Null.
​Es wird verwendet, um an bestimmten Stellen Zwischenräume innerhalb von Wörtern zu erstellen .Hat das genaue Gegenteil des nicht unterbrechenden Raums
(naja, eigentlich der Wort-Joiner⁠) ( 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
‑) (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:
unlesbar? Dies ist derselbe HTML-Code ohne Kommentar-Tags:
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.
quelle
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,
aber nur zwischen Wörtern, die zusammenpassen ( was Sie in Spannen haben, aber nicht nach dem Komma ), oder Sie können daswhite-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.
quelle
Mit Ihrem oben genannten Aufschlag verwenden
span { white-space:nowrap }. Es ist so gut, wie man es wirklich erwarten kann.quelle
spanElements in übersetzt 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. <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​und<wbr>und­alle eine Pause (Drucken eines Bindestrichs, Leerzeichens, Nichts, Nichts und Bindestrichs nur bei Pause), während dies nicht der Fall ist.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:Es wird von allen gängigen Browsern außer IE unterstützt.
quelle
<wbr>hat einen anderen Zweck. Ganz zu schweigen davon, dass diese Antwort ein Duplikat einer Antwort ist , die lange zuvor existiert hat.<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.<wbr>nicht nicht einen Zeilenumbruch über gewöhnliche Leerzeichen priorisieren. Das Wickeln geschieht im Beispiel also wie gewohnt.Sie können einfach die Randeinstellungen in CSS anpassen (in diesem Fall rechtsrand).
quelle
Verwenden Sie
<div>anstelle von<span>oder geben Sie eine Klasse für SPAN an und geben Sie ihr das Attribut display: block .quelle
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.
quelle
<wbr>dient zum Markieren von Unterbrechungspunkten bei sehr langen Wörtern, löst das Problem mit bevorzugten Zeilenumbrüchen nichtwbrElement 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.<wbr>.