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. Etwas wie:

HAHAHAHAHAHAHAHAHAHAHAHAHAHAHAHAHAHAHAHAHA ................................................. .................................................. ..........................................

Ich habe versucht, nur wordwrap()in PHP zu verwenden, aber das Problem dabei ist, dass wenn ein Link oder ein anderes gültiges HTML vorhanden ist, es kaputt geht.

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

Wie lösen Sie dieses Problem?

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

Siehe auch verwandte (möglicherweise doppelte) Fragen:

• Zeilenumbruch in CSS / JS
• Wer hat das Problem der langen Wortbrüche gelöst? (Hinweis: kein Stackoverflow)

in CSS3:

word-wrap:break-word

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

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

Lösung: Fügen Sie dem Container die folgenden CSS-Eigenschaften hinzu

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 ist, sie alle zu verwenden, um eine bessere browserübergreifende Kompatibilität zu erzielen

Hoffe das hilft

Ich verwende gerne die overflow: autoCSS-Eigenschaft / Wert-Paarung. Dadurch wird das übergeordnete Objekt so dargestellt, wie Sie es erwarten würden. Wenn der Text im übergeordneten Element zu breit ist, werden im Objekt selbst Bildlaufleisten angezeigt. Dadurch bleibt die Struktur so, wie Sie sie haben möchten, und der Betrachter kann einen Bildlauf durchführen, um mehr zu sehen.

Edit: die schöne an im overflow: autoVergleich zu overflow: scrollist , dass mit auto, nur die Bildlaufleisten angezeigt werden, wenn überquell Inhalt vorhanden ist . Mit scrollsind die Bildlaufleisten immer sichtbar.

Ich bin überrascht, dass niemand eine meiner Lieblingslösungen für dieses Problem erwähnt hat, das <wbr>(optionale Zeilenumbruch-) Tag. Es wird in Browsern ziemlich gut unterstützt und teilt dem Browser im Wesentlichen mit, dass er bei Bedarf einen Zeilenumbruch einfügen kann . Es gibt auch das zugehörige Leerzeichen ​mit der Breite Null mit der gleichen Bedeutung.

Für den genannten Anwendungsfall, bei dem Benutzerkommentare auf einer Webseite angezeigt werden, würde ich davon ausgehen, dass bereits einige Ausgabeformatierungen vorhanden sind, um Injektionsangriffe usw. zu verhindern. Daher ist es einfach, diese <wbr>Tags alle NZeichen in zu langen Wörtern oder in Links hinzuzufügen .

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

Ich würde den Beitrag in ein Div setzen, das einen Überlauf mit fester Breite hat, um zu scrollen (oder je nach Inhalt vollständig auszublenden).

So wie:

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

Aber das bin nur ich.

EDIT: Wie cLFlaVA weist darauf hin ... es besser ist , zu verwenden , autodann scroll. Ich stimme ihm zu.

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

Die Lösungen verbergen entweder den Überlauf (dh Scrollen oder nur ausgeblendet) oder erweitern, um zu passen. Es gibt keine Magie.

F: Wie können Sie ein 100 cm breites Objekt in einen nur 99 cm breiten Raum einpassen?

A: Das kannst du nicht.

Sie können Break-Word lesen

BEARBEITEN

Schauen Sie sich diese Lösung an. So wenden Sie einen Zeilenumbruch- / Fortsetzungsstil und eine Codeformatierung mit CSS an

oder

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

Ich weiche dem Problem aus, indem ich meine rechte Seitenleiste nicht so reparieren lasse: P.

Folgendes mache ich in ASP.NET:

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

Ich habe mir andere CSS-basierte Methoden angesehen, aber nichts gefunden, was browserübergreifend funktioniert.

basierend auf Jons Vorschlag den Code, den ich erstellt habe:

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);
    }

Ich wollte meinen Seiten keine Bibliotheken hinzufügen, nur um Wörter zu brechen. Dann habe ich eine einfache Funktion geschrieben, die ich unten zur Verfügung stelle, hoffe, sie hilft den Menschen.

(Es wird um 15 Zeichen unterbrochen und zwischen "& schüchtern;" angewendet, aber Sie können es einfach 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("­");
        }
        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);

Fügen Sie der ​Zeichenfolge das Leerzeichen Null ( ) hinzu, und es wird umbrochen.

Hier ist ein Javacript-Beispiel:

let longWordWithOutSpace = 'pneumonoultramicroscopicsilicovolcanoconiosis';
// add ​ between every character to make it wrap
longWordWithOutSpace.split('').join('​');

Ich habe eine Lösung veröffentlicht, die JavaScript und einen einfachen regulären Ausdruck verwendet, um lange Wörter zu brechen, damit sie umbrochen werden können, ohne das Layout Ihrer Website zu beschädigen.

Umbrechen Sie lange Zeilen mit CSS und JavaScript

Ich weiß, dass dies ein wirklich altes Problem ist, und da ich das gleiche Problem hatte, suchte ich nach einer einfachen Lösung. Wie im ersten Beitrag erwähnt, habe ich mich für die PHP-Funktion Wordwrap entschieden.

Informationen finden Sie im folgenden Codebeispiel ;-)

<?php
    $v = "reallyreallyreallylonglinkreallyreallyreallylonglinkreallyreallyreallylonglinkreallyreallyreallylonglinkreallyreallyreallylonglinkreallyreallyreallylonglink";
    $v2 = wordwrap($v, 12, "<br/>", true);
?>
<html>
    <head>
        <title>test</title>
    </head>
    <body>
        <table width="300" border="1">
            <tr height="30">
                <td colspan="3" align="center" valign="top">test</td>
            </tr>
            <tr>
                <td width="100"><a href="<?php echo $v; ?>"><?php echo $v2; ?></a></td>
                <td width="100">&nbsp;</td>
                <td width="100">&nbsp;</td>
            </tr>
        </table>
    </body>
</html>

Hoffe das hilft.