Wie kann ich verhindern, dass lange Worte meine Div brechen?

Zwei Korrekturen:

1. overflow:scroll - Dadurch wird sichergestellt, dass Ihre Inhalte auf Kosten des Designs angezeigt werden (Bildlaufleisten sind hässlich).
2. overflow:hidden - schneidet gerade jeden Überlauf ab. Es bedeutet jedoch, dass die Leute den Inhalt nicht lesen können.

Wenn Sie (im Beispiel SO)) verhindern möchten, dass es sich mit dem Padding überschneidet, müssen Sie wahrscheinlich ein weiteres Div innerhalb des Paddings erstellen, um Ihren Inhalt zu speichern.

Bearbeiten: Wie in den anderen Antworten angegeben, gibt es verschiedene Methoden zum Abschneiden der Wörter, z. B. das Ermitteln der Renderbreite auf der Clientseite (versuchen Sie niemals, diese serverseitig auszuführen, da sie niemals zuverlässig und plattformübergreifend funktioniert) JS und Einfügen von Umbruchzeichen oder Verwenden von nicht standardmäßigen und/oder wild inkompatiblen CSS-Tags (Word-wrap: break-Wordscheint in Firefox nicht zu funktionieren ).

Sie benötigen jedoch immer einen Überlaufdeskriptor. Wenn Ihr div ein anderes zu breites Stück blockartigen Inhalts (Bild, Tabelle usw.) enthält, benötigen Sie einen Überlauf, um das Layout/Design nicht zu zerstören.

Verwenden Sie also auf jeden Fall eine andere Methode (oder eine Kombination davon), aber denken Sie daran, auch einen Überlauf hinzuzufügen, damit Sie alle Browser abdecken.

Bearbeiten Sie 2 (um Ihren Kommentar unten zu adressieren):

Beginnen Sie mit der CSS overflow -Eigenschaft, die nicht perfekt ist, aber das Brechen von Designs verhindert. Sich bewerben overflow:hidden zuerst. Denken Sie daran, dass der Überlauf beim Auffüllen möglicherweise nicht unterbrochen wird. Verschachteln Sie daher entweder divs oder verwenden Sie einen Rahmen (was auch immer für Sie am besten geeignet ist).

Dadurch werden überlaufende Inhalte ausgeblendet und Sie verlieren möglicherweise die Bedeutung. Sie könnten eine Bildlaufleiste verwenden (mit overflow:auto oder overflow:scroll anstatt overflow:hidden) Aber abhängig von den Abmessungen des Div und Ihrem Design sieht dies möglicherweise nicht gut aus oder funktioniert nicht gut.

Um das Problem zu beheben, können wir JS verwenden, um Dinge zurückzuziehen und irgendeine Form von automatisiertem Abschneiden durchzuführen. Ich habe auf halbem Weg einen Pseudo-Code für Sie geschrieben, aber auf halbem Weg wird es ernsthaft kompliziert. Wenn Sie so viel wie möglich zeigen müssen, geben Sie Bindestrich einen Blick in ( wie unten erwähnt ).

Beachten Sie jedoch, dass dies zu Lasten der CPUs des Benutzers geht. Das Laden und/oder Ändern der Größe von Seiten kann sehr lange dauern.

Wie wir wissen, handelt es sich um ein komplexes Problem, das von den Browsern in keiner Weise unterstützt wird. Die meisten Browser unterstützen diese Funktion von Haus aus überhaupt nicht.

Bei einigen Arbeiten mit HTML-E-Mails, bei denen Benutzerinhalte verwendet wurden, jedoch kein Skript verfügbar ist (und auch CSS nicht sehr gut unterstützt wird), sollte das folgende CSS-Element in einem Wrapper um Ihren Block mit unbeschränktem Inhalt zumindest etwas helfen:

.Word-break {
  /* The following styles prevent unbroken strings from breaking the layout */
  width: 300px; /* set to whatever width you need */
  overflow: auto;
  white-space: -moz-pre-wrap; /* Mozilla */
  white-space: -hp-pre-wrap; /* HP printers */
  white-space: -o-pre-wrap; /* Opera 7 */
  white-space: -pre-wrap; /* Opera 4-6 */
  white-space: pre-wrap; /* CSS 2.1 */
  white-space: pre-line; /* CSS 3 (and 2.1 as well, actually) */
  Word-wrap: break-Word; /* IE */
  -moz-binding: url('xbl.xml#wordwrap'); /* Firefox (using XBL) */
}

Bei Mozilla-basierten Browsern enthält die oben genannte XBL-Datei:

<?xml version="1.0" encoding="utf-8"?>
<bindings xmlns="http://www.mozilla.org/xbl" 
          xmlns:html="http://www.w3.org/1999/xhtml">
  <!--
  More information on XBL:
  http://developer.mozilla.org/en/docs/XBL:XBL_1.0_Reference

  Example of implementing the CSS 'Word-wrap' feature:
  http://blog.stchur.com/2007/02/22/emulating-css-Word-wrap-for-mozillafirefox/
  -->
  <binding id="wordwrap" applyauthorstyles="false">
    <implementation>
      <constructor>
        //<![CDATA[
        var elem = this;

        doWrap();
        elem.addEventListener('overflow', doWrap, false);

        function doWrap() {
          var walker = document.createTreeWalker(elem, NodeFilter.SHOW_TEXT, null, false);
          while (walker.nextNode()) {
            var node = walker.currentNode;
            node.nodeValue = node.nodeValue.split('').join(String.fromCharCode('8203'));
          }
        }
        //]]>
      </constructor>
    </implementation>
  </binding>
</bindings>

Leider scheint Opera 8+ keine der oben genannten Lösungen zu mögen, daher muss JavaScript die Lösung für diese Browser sein (wie Mozilla/Firefox). Eine andere browserübergreifende Lösung ( JavaScript), das die späteren Ausgaben von Opera) enthält, sollte Hedger Wangs Skript verwenden, das hier zu finden ist: http://www.hedgerwow.com/360/dhtml/css-Word- break.html

Andere nützliche Links/Gedanken:

Incoherent Babble "Blog Archive" Emulieren von CSS-Zeilenumbrüchen für Mozilla/Firefox
http://blog.stchur.com/2007/02/22/emulating-css-Word-wrap-for-mozillafirefox/

[OU] Kein Zeilenumbruch in Opera, wird in IE einwandfrei angezeigt
http://list.opera.com/pipermail/opera-users/2004-November/024467.html
http://list.opera.com/pipermail/opera-users/2004-November/024468.html

CSS Cross Browser Zeilenumbruch

.Word_wrap
{
    white-space: pre-wrap; /* css-3 */
    white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
    white-space: -pre-wrap; /* Opera 4-6 */
    white-space: -o-pre-wrap; /* Opera 7 */
    Word-wrap: break-Word; /* Internet Explorer 5.5+ */
}

Verwenden Sie den Stil Word-break:break-all;. Ich weiß, dass es auf Tischen funktioniert.

Meinen Sie damit, dass in Browsern, die dies unterstützen, Word-wrap: break-Word funktioniert nicht?

Wenn in der Textdefinition des Stylesheets enthalten , sollte dies im gesamten Dokument funktionieren.

Wenn ein Überlauf keine gute Lösung ist, kann nur ein benutzerdefiniertes Javascript langes Word künstlich auflösen.

Hinweis: Es gibt auch diese <wbr> Word Break tag . Dies gibt dem Browser eine Stelle, an der er die Zeile aufteilen kann. Leider ist die <wbr> Tag funktioniert nicht in allen Browsern, nur in Firefox und Internet Explorer (und Opera mit einem CSS-Trick).

Nur geprüft IE 7, Firefox 3.6.8 Mac, Firefox 3.6.8 Windows und Safari:

Word-wrap: break-Word;

funktioniert für lange Links innerhalb eines Divs mit einer festgelegten Breite und ohne Überlauf, die in der CSS deklariert sind:

#consumeralerts_leftcol{
    float:left;
    width: 250px;
    margin-bottom:10px;
    Word-wrap: break-Word;
}

Ich sehe keine Inkompatibilitätsprobleme

Ich habe gerade von diese Frage über Silbentrenner erfahren. Das könnte das Problem lösen.

Nach vielen Kämpfen hat das für mich funktioniert:

.pre {
    font-weight: 500;
    font-family: Courier New, monospace;
    white-space: pre-wrap;
    Word-wrap: break-Word;
    Word-break: break-all;
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    hyphens: auto;
}

Funktioniert in den neuesten Versionen von Chrome, Firefox und Opera.

Beachten Sie, dass ich viele der von den anderen vorgeschlagenen white-space - Eigenschaften ausgeschlossen habe, die tatsächlich den pre -Einzug für mich gebrochen haben.

Für mich auf einem div ohne feste Größe und mit dynamischen Inhalten hat es funktioniert mit:

display:table;
Word-break:break-all;

Die Lösung, die ich normalerweise für dieses Problem verwende, besteht darin, 2 verschiedene CSS-Regeln für IE und andere Browser festzulegen:

Word-wrap: break-Word;

woks perfekt im IE, aber Word-Wrap ist keine Standard-CSS-Eigenschaft. Es ist eine Microsoft-spezifische Eigenschaft und funktioniert in Firefox nicht.

Für Firefox ist es am besten, die Regel nur mit CSS festzulegen

overflow: hidden;

für das Element, das den Text enthält, den Sie umbrechen möchten. Der Text wird nicht umbrochen, aber der Teil des Texts, der über die Grenze des Containers hinausgeht, wird ausgeblendet. Dies kann eine gute Lösung sein, wenn Sie nicht unbedingt den gesamten Text anzeigen müssen (d. H. Wenn sich der Text in einem <a> - Tag befindet).

Bezüglich der Regex in dieser Kommentar ist es gut, aber es fügt den schüchternen Bindestrich nur zwischen Gruppen von 5 Zeichen ohne Leerzeichen oder Bindestrich hinzu. Das erlaubt, dass die letzte Gruppe viel länger ist als beabsichtigt, da es keine passende Gruppe danach gibt.

Zum Beispiel das:

'abcde12345678901234'.replace(/([^\s-]{5})([^\s-]{5})/g, '$1­$2')

... ergibt dies:

abcde­12345678901234

Hier ist eine Version mit positivem Lookahead, um dieses Problem zu vermeiden:

.replace(/([^\s-]{5})(?=[^\s-])/g, '$1­')

... mit diesem Ergebnis:

abcde­12345­67890­1234

pdate: Dies in CSS zu handhaben ist wunderbar einfach und mit geringem Overhead verbunden, aber Sie haben keine Kontrolle darüber, wo Unterbrechungen auftreten, wenn sie auftreten. Das ist in Ordnung, wenn Sie sich nicht darum kümmern oder wenn Ihre Daten lange alphanumerische Laufzeiten ohne natürliche Unterbrechungen aufweisen. Wir hatten viele lange Dateipfade, URLs und Telefonnummern, an denen es deutlich besser ist, als an anderen zu brechen.

Unsere Lösung bestand darin, zuerst ein reguläres Ersetzen zu verwenden, um nach jeweils 15 (beispielsweise) Zeichen, die keine Leerzeichen sind, oder einem der Sonderzeichen, bei denen wir Pausen bevorzugen, ein Leerzeichen (# 8203;) einzufügen. Wir führen dann einen weiteren Ersatz durch, um nach diesen Sonderzeichen ein Leerzeichen mit der Breite Null einzufügen.

Leerzeichen mit null Breite sind nett, weil sie auf dem Bildschirm nie sichtbar sind. Schüchterne Bindestriche waren verwirrend, als sie angezeigt wurden, da die Daten signifikante Bindestriche aufweisen. Leerzeichen ohne Breite werden auch nicht berücksichtigt, wenn Sie Text aus dem Browser kopieren.

Die speziellen Umbruchzeichen, die wir derzeit verwenden, sind Punkt, Schrägstrich, Backslash, Komma, Unterstrich, @, | und Bindestrich. Sie würden nicht glauben, dass Sie irgendetwas tun müssen, um das Brechen nach Bindestrichen zu fördern, aber Firefox (mindestens 3.6 und 4) bricht bei Bindestrichen, die von Zahlen (wie Telefonnummern) umgeben sind, nicht von selbst ab.

Wir wollten auch die Anzahl der Zeichen zwischen künstlichen Pausen basierend auf dem verfügbaren Layoutraum steuern. Das bedeutete, dass der reguläre Ausdruck für lange, bruchsichere Läufe dynamisch sein musste. Dies wird häufig aufgerufen, und wir wollten aus Leistungsgründen nicht immer wieder dieselben Regexes erstellen. Daher haben wir einen einfachen Regex-Cache verwendet, der durch den Regex-Ausdruck und seine Flags verschlüsselt ist.

Hier ist der Code; Sie würden wahrscheinlich die Funktionen in einem Dienstprogrammpaket Namespace:

makeWrappable = function(str, position)
{
    if (!str)
        return '';
    position = position || 15; // default to breaking after 15 chars
    // matches every requested number of chars that's not whitespace or one of the special chars defined below
    var longRunsRegex = cachedRegex('([^\\s\\.\/\\,[email protected]\\|-]{' + position + '})(?=[^\\s\\.\/\\,[email protected]\\|-])', 'g');
    return str
                .replace(longRunsRegex, '$1​') // put a zero-width space every requested number of chars that's not whitespace or a special char
                .replace(makeWrappable.SPECIAL_CHARS_REGEX, '$1​'); // and one after special chars we want to allow breaking after
};
makeWrappable.SPECIAL_CHARS_REGEX = /([\.\/\\,[email protected]\|-])/g; // period, forward slash, backslash, comma, underscore, @, |, hyphen


cachedRegex = function(reString, reFlags)
{
    var key = reString + (reFlags ? ':::' + reFlags : '');
    if (!cachedRegex.cache[key])
        cachedRegex.cache[key] = new RegExp(reString, reFlags);
    return cachedRegex.cache[key];
};
cachedRegex.cache = {};

Testen Sie wie folgt:

makeWrappable('12345678901234567890 12345678901234567890 1234567890/1234567890')

pdate 2: Es scheint, dass Leerzeichen mit der Breite Null tatsächlich sind zumindest unter bestimmten Umständen im kopierten Text enthalten, Sie können sie jedoch nicht sehen. Offensichtlich ist es eine Aufforderung, zum Kopieren von Text mit versteckten Zeichen zu ermutigen, dass Daten wie diese in andere Programme oder Systeme eingegeben werden, auch in Ihre eigenen, wo dies zu Problemen führen kann. Wenn es beispielsweise in einer Datenbank landet, schlägt die Suche möglicherweise fehl, und solche Suchzeichenfolgen schlagen wahrscheinlich ebenfalls fehl. Das Verwenden der Pfeiltasten zum Durchlaufen solcher Daten erfordert (zu Recht) einen zusätzlichen Tastendruck, um sich über das Zeichen zu bewegen, das Sie nicht sehen können, was für Benutzer etwas seltsam ist, wenn sie es bemerken.

In einem geschlossenen System können Sie dieses Zeichen bei der Eingabe herausfiltern, um sich selbst zu schützen, aber das hilft anderen Programmen und Systemen nicht.

Alles in allem funktioniert diese Technik gut, aber ich bin mir nicht sicher, was die beste Wahl für einen Break-verursachenden Charakter wäre.

pdate 3: Dass dieser Charakter in Daten landet, ist keine theoretische Möglichkeit mehr, sondern ein beobachtetes Problem. Benutzer senden Daten, die vom Bildschirm kopiert wurden, werden in der Datenbank gespeichert, Suchanfragen werden unterbrochen, Dinge werden seltsam sortiert usw.

Wir haben zwei Dinge getan:

1. Schrieb ein Dienstprogramm, um sie aus allen Spalten aller Tabellen in allen Datenquellen für diese App zu entfernen.
2. Es wurde eine Filterung hinzugefügt, um es in unserem Standard-Zeichenfolgen-Eingabeprozessor zu entfernen, sodass es nicht mehr vorhanden ist, wenn Code es sieht.

Dies funktioniert gut, ebenso wie die Technik selbst, aber es ist eine warnende Geschichte.

pdate 4: Wir verwenden dies in einem Kontext, in dem die zugeführten Daten möglicherweise HTML-geschützt sind. Unter den richtigen Umständen kann es Leerzeichen mit der Breite Null in die Mitte von HTML-Entitäten einfügen, was zu verrückten Ergebnissen führt.

Es wurde korrigiert, kaufmännisches Und zu der Liste der Zeichen hinzuzufügen, bei denen wir keine Unterbrechungen machen, wie folgt:

var longRunsRegex = cachedRegex('([^&\\s\\.\/\\,[email protected]\\|-]{' + position + '})(?=[^&\\s\\.\/\\,[email protected]\\|-])', 'g');

Muss "table-layout: fixed" setzen, damit der Zeilenumbruch funktioniert

Benutze dies

Word-wrap: break-Word;
overflow-wrap: break-Word;
Word-break: break-all;

HYPHENATOR ist die richtige Antwort (siehe oben). Das eigentliche Problem hinter Ihrer Frage ist, dass Webbrowser (im Jahr 2008) immer noch extrem primitiv sind und keine Silbentrennungsfunktion haben. Schauen Sie, wir stehen noch am Anfang der Computernutzung - wir müssen geduldig sein. Solange Designer die Webwelt beherrschen, wird es uns schwer fallen, auf einige wirklich nützliche neue Funktionen zu warten.

UPDATE: Ab Dezember 2011 haben wir jetzt eine weitere Option mit der neuen Unterstützung dieser Tags in FF und Safari:

p {
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    hyphens: auto;
}

Ich habe einige grundlegende Tests durchgeführt und es scheint auf einer neueren Version von Mobile Safari und Safari 5.1.1 zu funktionieren.

Kompatibilitätstabelle: https://developer.mozilla.org/en/CSS/hyphens#AutoCompatibilityTable

Für die Kompatibilität mit IE 8+ verwenden Sie:

-ms-Word-break: break-all;
     Word-break: break-all;

     /* Non standard for webkit */
     Word-break: break-Word;

-webkit-hyphens: auto;
   -moz-hyphens: auto;
        hyphens: auto;

Sehen Sie es hier http://css-tricks.com/snippets/css/prevent-long-urls-from-breaking-out-of-container/

Alles, was ich tun musste, war, dies auf den Stil des Div-Containers mit einer festgelegten Breite anzuwenden.

Wenn du das hast -

  <style type="text/css">
      .cell {
            float: left;
            width: 100px;
            border: 1px solid;
            line-height: 1em;
      }
  </style>

  <div class="cell">TopLeft</div>
  <div class="cell">TopMiddlePlusSomeOtherTextWhichMakesItToLong</div>
  <div class="cell">TopRight</div>
  <br/>
  <div class="cell">BottomLeft</div>
  <div class="cell">BottomMiddle</div>
  <div class="cell">bottomRight</div>

wechseln Sie einfach in ein vertikales Format mit Divs und verwenden Sie Min-Width in Ihrem CSS anstelle von Width.

  <style type="text/css">
      .column {
            float: left;
            min-width: 100px;
      }
      .cell2 {
            border: 1px solid;
            line-height: 1em;
      }
  </style>

  <div class="column">
      <div class="cell2">TopLeft</div>
      <div class="cell2">BottomLeft</div>
  </div>
  <div class="column">
      <div class="cell2">TopMiddlePlusSomeOtherTextWhichMakesItToLong</div>
      <div class="cell2">BottomMiddle</div>
  </div>
  <div class="column">
      <div class="cell2">TopRight</div>
      <div class="cell2">bottomRight</div>
  </div>
  <br/>

Wenn Sie echte Tabellendaten anzeigen, ist es natürlich in Ordnung, eine echte Tabelle zu verwenden, da diese semantisch korrekt ist und Personen informiert, die Screenreader verwenden, die sich in einer Tabelle befinden sollen. Es verwendet sie für das allgemeine Layout oder das Aufteilen von Bildern, für die Sie gelyncht werden.

Ja, wenn es möglich ist, setze eine absolute Breite und setze overflow : auto funktioniert gut.

p {
    overflow-wrap: break-Word;
}


@-moz-document url-prefix() { 
    p {
        white-space: -moz-pre-wrap;
        Word-wrap: break-Word;
    }
}

Ich musste Folgendes tun, da, wenn die Eigenschaften nicht in der richtigen Reihenfolge deklariert wurden, die Wörter an der falschen Stelle zufällig getrennt wurden und kein Bindestrich hinzugefügt wurde.

    -moz-white-space: pre-wrap;
white-space: pre-wrap;        
    hyphens: auto;
    -ms-Word-break: break-all;
    -ms-Word-wrap: break-all;
    -webkit-Word-break: break-Word;
    -webkit-Word-wrap: break-Word;
Word-break: break-Word;
Word-wrap: break-Word;
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    -ms-hyphens: auto;
hyphens: auto;

Ursprünglich geschrieben von Enigmo: https://stackoverflow.com/a/14191114

"Word-wrap: break-Word" funktioniert in Firefox 3.5 http://hacks.mozilla.org/2009/06/Word-wrap/

Füge dies zu css deiner div hinzu: Word-wrap: break-Word;

bewahren Sie nach all den Zeilenumbrüchen und Unterbrechungen in Word den Überlauf und prüfen Sie, ob das Problem dadurch behoben wird. Ändere einfach die Anzeige deines Divs in: display: inline;