html (+css): bezeichnet ein bevorzugter Platz für einen Zeilenumbruch

Sagen wir, ich habe diesen text möchte ich die Anzeige in eine HTML-Tabellenzelle:

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 die Linie zu brechen, vorzugsweise nach einem der Kommas.

Gibt es eine Möglichkeit zu sagen, den HTML-renderer, um zu versuchen, brechen bei einigen bestimmten Ort, und machen Sie das zuerst, bevor Sie versuchen zu brechen nach einem der Bereiche, ohne Verwendung von non-breaking-spaces? Wenn ich non-breaking-spaces, dann macht es die Breite größer ist bedingungslos. Ich wollen den Zeilenumbruch zu geschehen, nachdem einer der Bereiche, wenn der Zeilenumbruch-Algorithmus, der es versucht hat, mit den Kommas erste und nicht die Zeile zu passen.

Versuchte ich die Verpackung des Textes Fragmente in  - Elemente, aber das scheint nicht alles zu tun, hilfreich.

<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 aus wie die CSS3 text-wrap: vermeiden, Verhalten ist das, was ich will, aber ich kann nicht scheinen, um es zu arbeiten.

Sie können mit non-breaking-spaces innerhalb der Spannweiten.
Aber ich will nicht mit nicht-breaking spaces. Ich würde gerne auch ein "nicht-wollen-zu-brechen-hier-aber-ich-will-wenn-ich-haben-zu" Räumen, aber soweit ich weiß, sind solche vorhanden ist.
ich fühle Sie .. es ist aber nicht möglich .. Hinzugefügt eine Antwort.
Hmmm... Rice Krispies.
Sie sollten akzeptieren, die Antwort von @EggertJóhannesson, wie es bietet eine gute Abhilfe!

InformationsquelleAutor Jason S | 2011-03-22

137

Mithilfe
```
span.avoidwrap { display:inline-block; }
```
und das einwickeln der text, den ich wollen zusammen gehalten werden in
```
 Text 
```
wird es wickeln, zuerst in bevorzugter Blöcke und dann in kleinere Fragmente, wie gebraucht.

Sehr ordentlich. Danke.
Funktioniert Super! Nur ein zusätzlicher Hinweis: Leerzeichen am Anfang und am Ende einer inline-block werden ignoriert, so daß zum begrenzen der text in Blöcke von Speicherplatz, die Sie benötigen, um es zwischen inline-blocks. Zum Beispiel, wenn Spannweiten wurden gestylt zu werden inline-Blöcke, dann Hello world wird Helloworld, und Hello world normal Hello world.
Dies funktioniert gut!
 ist mehr semantische und Blätter-Steuerelement im browser, das ist generell eine gute Sache. In diesem Fall macht es brechen -, wenn-vital möglich.
bedeutet nicht, dass ein bevorzugt auf den Bruch der Linie, sondern ein möglich ein.

InformationsquelleAutor Eggert Jóhannesson
16

Es gibt eine sehr nette RWD-Lösung von Dan Mall, die ich bevorzuge. Ich werde Sie hier hinzufügen weil einige andere Fragen zu reagieren Zeilenumbrüche werden als Duplikate gekennzeichnet.

In Ihrem Fall haben Sie würden:
```
Honey Nut Cheerios, Wheat Chex, etc.
```
Und eine Zeile CSS im Medien-Abfrage:
```
@media screen and (min-width: 768px) {
 .rwd-break { display: none; }
}
```
InformationsquelleAutor Stephan Weinhold
3

Die Antwort ist Nein (Sie nicht verändern können Zeilenumbruch-Algorithmus, der verwendet).

Aber es gibt einige workarounds (beste ist die akzeptierte Antwort)

Können Sie gehen in der Nähe mit dem non-breaking-space   aber nur zwischen den Wörtern, die zusammen gehen (, was Sie umfasst, nicht aber nach dem Komma ), oder verwenden Sie die white-space:nowrap @Marcel erwähnt.

Beide Lösungen die gleiche Sache zu tun, und beide werden nicht brechen, eine Gruppe von Wörtern, wenn Sie nicht fit auf Ihrer eigenen.

argh. 🙁 das stinkt, es bedeutet, dass ich entweder damit Leben müssen, oder ich muss versuchen zu erkennen, lange Linien auf meiner eigenen in einem Versuch, um die Niederlage der line-breaking-Algorithmus.
Ich bearbeitete Ihre Antwort ein link zu dem workaround, da ich fast gar nicht weiter Lesen wegen der Art, wie Ihre erste Linie ist formuliert.
Ich unterstütze Ihr Bearbeiten, aber Gaby rückgängig gemacht. Gaby: warum? Wollen Sie irreführen Benutzer?
sollten alle Antwort ist SO geändert werden, zeigen Sie auf den akzeptiert eine auf der gleichen Seite? Meine Antwort, hat 1 (Summe) abstimmen und es ist eine akzeptierte Antwort mit 48 Stimmen. Ich bin mir ziemlich sicher, dass das akzeptiert, ist das man immer die Aufmerksamkeit (Recht). Außer, dass ich darauf bestehen, dass es keine Möglichkeit zum ändern der breaking-Algorithmus verwendet (wie der OP fragt nach)
check meine Lösung verwendet, die Ihre eigene Logik gegen Sie. kombinieren Sie das mit einer der span-Lösungen, dann haben Sie die vollständige Kontrolle über den Zeilenumbruch-Algorithmus

InformationsquelleAutor Gabriele Petrioli
2

Mit Ihrem mark-up über die Verwendung span { white-space:nowrap }. Es ist so gut wie Sie können erwarten, wirklich.

Danke, aber das wird nicht funktionieren, weil es im Grunde übersetzt Räumen in einem span element  , und hält die Räume aus zu brechen überhaupt. Ich möchte einfach nur davon abhält, den renderer von brechen in zwischen einer meiner Elemente, aber wenn es muss, ich will es tun.
S: ich habe Hinzugefügt, dass andere Optionen auf meine Antwort.
wie ist   anders als ein Leerzeichen? Was ich sagen kann, die Möglichkeiten sind entweder, dass ein Charakter erlaubt, eine Pause oder nicht. Also, ' - ' und '' und  und  und  alle erlauben, eine Pause (drucken Sie einen Bindestrich, Leerzeichen, nichts, nichts, und Bindestrich-nur-auf-brechen, beziehungsweise), während   nicht.
S: Zusätzliches Beispiel für die Verwendung.
Ich habe es gerade ausprobiert, und es scheint nicht die Priorität in Anspruch nehmen, um Räume für Zeilenumbrüche. Die Priorität ist es, was ich brauche. Wenn der Bruch Verhalten für ein anderes Zeichen oder element ist entweder ja oder Nein, dann gibt es keine Lösung für mein problem. Wenn es relativ Zeilenumbruch Prioritäten, dann hätte ich vielleicht eine Lösung.

InformationsquelleAutor Marcel
2

Neue Antwort jetzt haben wir HTML5:

HTML5 bietet die  tag. (Es steht für die Word-Break-Möglichkeit.)

Hinzufügen eines  sagt dem browser zu brechen, bevor es irgendwo sonst, so ist es einfach, Wörter zu bilden, brechen Sie nach den Kommas:
```
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
```
Unterstützt wird es meiner allen gängigen Browsern außer IE.

-1. Warum nicht testen Sie vor der Beratung? Es funktioniert nicht.  hat einen anderen Zweck. Nicht zu erwähnen, dass diese Antwort ein Duplikat eines answer das gab es schon lange vor.
WBR keinen anderen Zweck. developer.mozilla.org/en-US/docs/Web/HTML/Element/wbr
 stellt nur eine break-Möglichkeit; es nicht "sagen Sie dem browser zu brechen, bevor es irgendwo sonst". Verwendet, bevor ein Raum, ist es normalerweise nutzlos, da Räume normalerweise Zeilenumbruchmöglichkeit.
Dieses funktioniert überhaupt nicht, in jedem browser. Die Antwort ist falsch:  nicht priorisieren Sie einen Zeilenumbruch über das normale Leerzeichen. So wickeln passiert einfach normal in dem Beispiel.
Um zu klären, ist beabsichtigt, um zu signalisieren "hier ist ein Ort, können Sie" brechen", wenn diese position sonst als in a word. Er sagt: "behandeln Sie die Stelle zwischen diesen beiden Zeichen, als gäbe es einen Raum gibt", nicht "lieber Pause hier". Wenn es bereits einen Raum, hat keine Bedeutung.

InformationsquelleAutor ACarter
2

Einfache Antwort ist die Verwendung der zero-width space character  Es wird verwendet für die Herstellung breakspaces innen Wörter, die an bestimmten Punkten.

Macht die genaue Gegenteil der non-breaking space   (naja, eigentlich die word-joiner ⁠)(word-joiner wird die null-Breite version non-breaking space)

(es gibt auch andere, die nicht brechen die codes wie die non-breaking Bindestrich ‑)(hier ist eine umfassende Antwort auf die verschiedenen "Varianten" von nbsp)

Wenn Sie möchten, eine HTML-only (ohne CSS/JS) Lösung könntest du eine Kombination der zero-width space und die non-breaking space, aber das wäre wirklich chaotisch, und schreibt eine lesbare version erfordert ein wenig Mühe.

Strg + c, Strg + v hilft

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
```
nicht lesbar? dies ist der gleiche HTML-Code mit kein 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
```
Jedoch, da E-Mail das html-rendering ist nicht vollständig standardisiert, das ist gut für diese Art von Verwendung, da diese Lösung verwendet keine CSS - /JS

Auch, wenn Sie diese in Kombination mit einer der -basierte Lösungen, die Sie haben vollständige Kontrolle über die line-breaking-Algorithmus

(Anmerkung der Redaktion:)

Das einzige problem das ich sehen konnte, dass Sie, wenn Sie wollten, um die Punkte der am günstigsten gelegene Bruch dynamisch. Dies würde eine ständige JS manipulation von einzelnen umfasst verhältnismäßige Größe, und mit den HTML-entities im text.

was sind span-hacks?
Die anderen Antworten unter Ausnutzung von span-tags.
Ich möchte auch beachten, dass obwohl diese Lösung scheint nicht die einfachste, es ist die zuverlässigste, da diese Personen sich nicht und sollte sich nicht ändern semantische Repräsentation oft von Browsern, E-Mail-Parser, oder anderen HTML-parser.

InformationsquelleAutor
-1

Können Sie einfach passen Sie die Randeinstellungen in CSS (margin-right in diesem Fall).
```
text {
    margin-right: 20%;
}
```
InformationsquelleAutor gooflord
-3

Verwenden <div> statt  oder geben Sie eine Klasse für SPAN und geben Sie die display:block Attribut.

InformationsquelleAutor Angry Spartan
-5

Gibt es ein HTML element, dass™: die (nun standardisierten)  - element.

Ich würde Ihnen raten, zu verwenden. Es kann nicht funktionieren,überall, aber es ist das beste, was Sie tun können, ohne durch Reifen.

-1:  ist für die Markierung der Haltepunkte bei sehr langen Worten, löst es nicht das problem mit am günstigsten gelegene Zeilenumbrüche
Direktes Zitat aus die Spezifikation: "Die wbr - element repräsentiert einen Zeilenumbruch Gelegenheit." Dies ist genau was der OP gefragt. Stop downvoting Menschen auf, was Sie Lesen Sie auf wikis.
Ja, Gelegenheit. Aber Browsern schon die Möglichkeit haben, zu brechen, zu Räumen. Die Frage ist, wie zu sagen, ein browser auf dem Leerzeichen ist es vorzuziehen, zu brechen.
...und die Antwort ist die Verwendung .
Nein, das ist nicht die Antwort. Es erhöht nicht die Wahrscheinlichkeit für die Verwendung einer bestimmten, bereits vorhandenen Haltepunkt Möglichkeit; es fügt nur eine neue Haltepunkt Möglichkeit, wo nicht bereits vorhanden ist. Zwei Möglichkeiten in einer Zeile ist nicht von nutzen. developer.mozilla.org/en-US/docs/Web/HTML/Element/wbr

InformationsquelleAutor Mathias Bynens

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.