wake-up-neo.com

Wie kann man lange Zeilen ohne Leerzeichen in HTML umbrechen?

Wenn ein Benutzer eine lange Zeile ohne Leerzeichen oder Leerzeichen eingibt, wird die Formatierung unterbrochen, indem er breiter als das aktuelle Element wird. So etwas wie:

HAHAHAHAHAHAHAHAHAHAHAHAHAHAHAHAHA ................................................. .................................................. ..........................................

Ich habe versucht, nur wordwrap() in PHP zu verwenden, aber das Problem ist, wenn ein Link oder ein anderer gültiger HTML-Code vorhanden ist, bricht er ab.

Es scheint ein paar Optionen in CSS zu geben, aber keine davon funktioniert in allen Browsern. Siehe Zeilenumbruch im IE.

Wie lösen Sie dieses Problem?

67
Chris Bartow

Ich habe es nicht persönlich benutzt, aber Hyphenator sieht vielversprechend aus.

Siehe auch verwandte (möglicherweise doppelte) Fragen:

7
Matt Kantor

in CSS3: 

Word-wrap:break-Word
120
Marcin

Ich habe versucht, das gleiche Problem zu lösen und habe hier die Lösung gefunden:

http://perishablepress.com/press/2010/06/01/wrapping-content/

Lösung: Hinzufügen der folgenden CSS-Eigenschaften zum Container

div {
    white-space: pre;           /* CSS 2.0 */
    white-space: pre-wrap;      /* CSS 2.1 */
    white-space: pre-line;      /* CSS 3.0 */
    white-space: -pre-wrap;     /* Opera 4-6 */
    white-space: -o-pre-wrap;   /* Opera 7 */
    white-space: -moz-pre-wrap; /* Mozilla */
    white-space: -hp-pre-wrap;  /* HP Printers */
    Word-wrap: break-Word;      /* IE 5+ */
}

Die Idee besteht darin, sie alle zu verwenden, um eine bessere Browser-kompatible Kompatibilität zu erreichen

Hoffe das hilft

Ich benutze gerne die overflow: auto-CSS-Eigenschaft/Wert-Paarung. Dadurch wird das übergeordnete Objekt so gerendert, wie Sie es erwarten würden. Wenn der Text im übergeordneten Element zu breit ist, werden Bildlaufleisten im Objekt selbst angezeigt. Auf diese Weise bleibt die Struktur so, wie Sie es möchten, und der Betrachter hat die Möglichkeit, zu scrollen, um mehr zu sehen.

Edit: Das Schöne an overflow: auto im Vergleich zu overflow: scroll ist, dass bei auto die Bildlaufleisten nur angezeigt werden, wenn überlaufender Inhalt existiert. Bei scroll sind die Bildlaufleisten immer sichtbar.

17
cLFlaVA

Ich bin überrascht, dass niemand eine meiner Lieblingslösungen für dieses Problem erwähnt hat, den <wbr> (optionaler Zeilenumbruch) -Tag. Es ist ziemlich in Browsern gut unterstützt und sagt dem Browser im Wesentlichen, dass es can einen Zeilenumbruch einfügt, wenn dies erforderlich ist. Es gibt auch das entsprechende Leerzeichen mit der Zeichenfolge &#8203; mit derselben Bedeutung.

Für den genannten Anwendungsfall, Benutzer-Kommentare auf einer Webseite anzuzeigen, würde ich davon ausgehen, dass es bereits Ausgabeformatierungen gibt, um Injektionsangriffe usw. zu verhindern. Daher ist es einfach, diese <wbr>-Tags alle N-Zeichen in zu langen Wörtern hinzuzufügen in Links.

Dies ist besonders nützlich, wenn Sie die Kontrolle über das Format der Ausgabe benötigen, was CSS nicht immer zulässt.

6
Wylie

Ich würde den Post in ein div setzen, das einen festen Überlauf für die Einstellung der Breite hätte, um zu scrollen (oder je nach Inhalt vollständig auszublenden).

so wie:

#post{
    width: 500px;
    overflow: scroll;
}

Aber das ist nur ich.

BEARBEITEN: Da cLFlaVA darauf hinweist ... ist es besser, auto zu verwenden als scroll. Ich stimme ihm zu.

5
Tim Knight

Es gibt keine "perfekte" HTML/CSS-Lösung.

Die Lösungen blenden entweder den Überlauf aus (dh scrollen oder werden einfach ausgeblendet) oder erweitern sich entsprechend. Es gibt keine Magie. 

F: Wie können Sie ein 100 cm breites Objekt in einen Raum mit einer Breite von nur 99 cm einpassen?

A: Das kannst du nicht.

Sie können break-Word lesen

EDIT

Bitte überprüfen Sie diese Lösung So wenden Sie einen Zeilenumbruch Fortsetzungsstil und Code-Formatierung mit css an - /

oder

Wie kann ich verhindern, dass lange Wörter mein Div brechen?

2
inspite

Ich vermeide das Problem, indem ich meine rechte Seitenleiste nicht so fixiert habe: P

0
Jimmy

basierend auf Jons Vorschlag, den von mir erstellten Code:

public static string WrapWords(string text, int maxLength)
    {
        string[] words = text.Split(' ');
        for (int i = 0; i < words.Length; i++)
        {
            if (words[i].Length > maxLength) //long Word
            {
                words[i] = words[i].Insert(maxLength, " ");
                //still long ?
                words[i]=WrapWords(words[i], maxLength);
            }
        }
        text = string.Join(" ", words);
        return (text);
    }
0
Ers

Fügen Sie der Zeichenfolge den Bereich mit der Breite Null (&#8203;) hinzu, und es wird umbrochen.

Hier ist ein Javacript-Beispiel:

let longWordWithOutSpace = 'pneumonoultramicroscopicsilicovolcanoconiosis';
// add &#8203; between every character to make it wrap
longWordWithOutSpace.split('').join('&#8203;');
0
Suresh

Folgendes mache ich in ASP.NET:

  1. Teilen Sie das Textfeld in Leerzeichen auf, um alle Wörter zu erhalten
  2. Wiederholen Sie die Wörter, indem Sie nach Wörtern suchen, die länger als eine bestimmte Anzahl sind
  3. Fügen Sie alle x Zeichen ein (z. B. alle 25 Zeichen).

Ich habe mir andere CSS-Methoden angeschaut, aber nichts gefunden, was Browser-übergreifend funktioniert.

0
Jon Galloway

Ich wollte keine Bibliotheken zu meinen Seiten hinzufügen, nur um Word zu brechen ... Dann schrieb ich eine einfache Funktion, die ich unten zur Verfügung stelle, hoffentlich hilft es den Leuten.

(Es bricht um 15 Zeichen und wendet "& shy;" dazwischen an, aber Sie können es leicht im Code ändern.)

//the function:
BreakLargeWords = function (str)
{
    BreakLargeWord = function (Word)
    {
        var brokenWords = [];
        var wpatt = /\w{15}|\w/igm;
        while (wmatch = wpatt.exec(Word))
        {
            var brokenWord = wmatch[0];
            brokenWords.Push(brokenWord);
            if (brokenWord.length >= 15) brokenWords.Push("&shy;");
        }
        return brokenWords.join("");
    }

    var match;
    var Word = "";
    var words = [];
    var patt = /\W/igm;
    var prevPos = 0;
    while (match = patt.exec(str))
    {
        var pos = match.index;
        var len = pos - prevPos;
        Word = str.substr(prevPos, len);

        if (Word.length > 15) Word = BreakLargeWord(Word);

        words.Push(Word);
        words.Push(match[0]);
        prevPos = pos + 1;
    }
    Word = str.substr(prevPos);
    if (Word.length > 15) Word = BreakLargeWord(Word);
    words.Push(Word);
    var text = words.join("");
    return text;
}

//how to use
var bigText = "Why is this text this big? Lets do a wrap <b>here</b>! aaaaaaaaaaaaa-bbbbb-eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee";
var goodText = BreakLargeWords(bigText);
0
Cesar