Schlauer Wort zu brechen in CSS?

Wenn ich gerade word-break: break-all auf ein element, ich bin oft am Ende mit diesem:

Hallo Leute, ich bin der Eingabe eines mes

sage, dass ist zu lang!

Offensichtlich ist dies viel besser als:

Hallo Leute, ich bin der Eingabe eines

Nachricht zu lang ist!

Aber zur gleichen Zeit, wenn jemand schreibt:

BLAAAAAAAAARRRRRRRRRRRRGGGGGGGGHHHHHHHH!!!!!!

Dann würd ich es haben wollen:

BLAAAAAAAAARRRRRRRRRRR

RGGGGGGGGHHHHHHHH!!!!!!

Ich kann nicht scheinen zu finden ein Weg, um dieses tatsächlich zu tun.

Beachten Sie, dass die Breite des Elements ist nicht festgelegt und kann sich ändern.

  • Versuchen word-break: normal; word-wrap: break-word? (Ich benutze nicht die CSS über ein sehr primitiver Ebene, oder weiß, wie es reagiert, aber es "scheint, wie es funktionieren könnte".
InformationsquelleAutor Niet the Dark Absol | 2012-10-02
  1. 34

    Versuchen word-break: break-word; er sich Verhalten sollte, wie Sie es erwarten.

    • Perfekt! Danke!!!
    • word-break: break-word ist nicht-standard-für webkit, habe das gleiche problem wie op this Antwort löst.
    • Die Rechte ist word-wrap: break-word;
    • word-wrap: break-word hat bei mir nicht funktioniert, es hatte keine Wirkung. Ich habe text in einer Zelle in der Tabelle, und die Tabelle wird in einem div-Container mit max-width: 1000px Getestet auf Chrome und Firefox.
    • Das Bearbeiten im Dez 2015 ist wahrscheinlich nicht geeignet, es verändert die Antwort völlig. Die alte Antwort word-break: break-word; ist nicht standard, aber es funktioniert tatsächlich in meinem chrome. Die neue Antwort (nach der Bearbeitung) word-wrap: break-word; funktioniert nicht bei allen. IMHO die direkte Bearbeitung der Antwort auf diese Weise scheint zu sein, verwirrend für den Leser.
    • Für mich word-wrap: break-word; funktioniert, wenn ich geben Sie eine Breite, unabhängig von der Einheit. So, durch die Angabe width: 100% ich war in der Lage, damit es funktioniert. Ich werde aber nicht upvoting diese Antwort, weil das Bearbeiten ändert vollständig die Antwort (es war kein Tippfehler, es war absolut eine weitere css-Eigenschaft) und es war nicht einmal geschrieben von der original-poster.
    • You made my day!!! vielen Dank @PJ McCormick

    InformationsquelleAutor PJ McCormick
  2. 5

    Für viele unserer Projekte, die wir in der Regel fügen Sie diese bei Bedarf:

    .text-that-needs-wrapping {
    overflow-wrap: break-word;
    word-wrap: break-word;
    -ms-word-break: break-all;
    word-break: break-word;
    -ms-hyphens: auto;
    -moz-hyphens: auto;
    -webkit-hyphens: auto;
    hyphens: auto;
}

    Es behandelt die meisten merkwürdige Situationen mit den verschiedenen Browsern.

    InformationsquelleAutor Dominic White
  3. 3

    Für intelligentes Wort bricht, oder für richtige Wort bricht in den ersten Platz, müssen Sie die language-abhängigen Regeln. Für Englisch und viele andere Sprachen, die richtige zu brechen bedeutet, die Silbentrennung, die mit einem Bindestrich am Ende einer Zeile, wenn ein Bruch Auftritt.

    In der CSS, die Sie verwenden können,Bindestriche: auto, obwohl Sie meist noch duplizieren müssen es mit vendor-Präfixen. Als dies nicht funktioniert, auf IE 9 können Sie prüfen, JavaScript-basierte Silbentrennung wie Hyphenate.js statt. In beiden Fällen ist es wichtig die Sprache zu verwenden, markup (lang- Attribut).

    Bricht lange, unhyphenateable Streicher ist eine andere Frage. Sie würde am besten behandelt werden in der Vorverarbeitung, aber in einer einfachen Einstellung word-break: break-word (was bedeutet, dass falsche brechen der Wörter, die in Englisch zum Beispiel) kann betrachtet werden als ein Notfall.

    InformationsquelleAutor Jukka K. Korpela
Schreibe einen Kommentar