wordwrap eine sehr lange Zeichenfolge

Wie können Sie eine lange Zeichenfolge, website-Adresse, ein Wort oder eine Reihe von Symbolen mit automatischen Zeilenumbrüche zu halten, ein div-Breite? Ich denke mal, ein wordwrap von Arten. In der Regel ein Leerzeichen funktioniert, aber gibt es eine CSS Lösung wie word-wrap?

Es zum Beispiel (sehr nastily) überschneidet divs, Kräfte horizontal scrollen etc.
wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww

Was kann ich hinzufügen, um die oben genannten Zeichenfolge, um es zu passen fein säuberlich in ein paar Zeilen in ein div oder in das browser-Fenster?

InformationsquelleAutor der Frage Peter Craig | 2009-05-13

  1. 84

    Diese Frage wurde hier gestellt bevor:

    Lange Geschichte kurz:

    Soweit CSS-Lösungen gehen, die Sie haben: overflow: scroll; zu zwingen das element zu zeigen, scrollbars und overflow:hidden; zu einfach schneiden Sie alle extra text. Es ist text-overflow:ellipsis; und word-wrap: break-word; aber Sie sind nur IE (break-word im CSS3-Entwurf, jedoch, das wird also die Lösung für dieses in 5 Jahren).

    Quintessenz ist, dass, wenn es ist sehr wichtig für Sie, um dies zu verhindern, die mit Textumbruch wird der text in die nächste Zeile die einzig sinnvolle Lösung ist, um zu injizieren &shy; (soft-hyphen), <wbr> (word break-tag), oder &#8203; (zero-width space, gleiche Wirkung wie &shy; minus, Bindestrich) in Ihrem string server-Seite. Wenn Sie nichts dagegen haben Javascript, es ist jedoch die Silbentrennungdas scheint ziemlich solide.

    InformationsquelleAutor der Antwort Paolo Bergantino

  2. 31

    word-wrap: break-word; ist in IE7+, FF 3.5 und Webkit-fähige Browser (Safari/Chrome etc). Behandeln IE6 werden Sie auch erklären müssen word-wrap: break-all;

    Wenn FF 2.0 nicht auf Ihrem browser matrix dann mit diesen ist eine praktikable Lösung. Es tut sich leider nicht trennen der vorhergehenden Zeile, wo das Wort ist gebrochen, das ist ein typographischer Alptraum. Ich würde vorschlagen, mit der Silbentrennung vorgeschlagen von Paolo ist unobtrusive JavaScript. Die fall-back für nicht JavaScript-fähige Benutzer wird dann das gebrochene Wort ohne Bindestriche. Kann ich mit Leben für den Augenblick. Dieses problem wird wahrscheinlich auftreten, in einem CMS, wo der web-designer nicht kontrollieren können, welche Inhalte eingegeben werden, oder wo Zeilenumbrüche und weiche Bindestriche umgesetzt werden kann.

    Habe ich ein Blick auf die W3-Spezifikationwo die Silbentrennung in CSS3 wird diskutiert. Leider scheint es ein paar Vorschläge, aber noch nichts konkretes. Es erscheint der browser-Anbieter sind noch zu implementieren ist alles entweder noch. Ich habe sowohl Mozilla und Webkit für proprietory code aber es gibt keine Anzeichen einer.

    InformationsquelleAutor der Antwort Kevin Rapley

  3. 22

    word-break:break-all arbeitet ein Genuss

    InformationsquelleAutor der Antwort Sam Jones

  4. 9

    Nur erwähnt, dass dieses über hier aber wahrscheinlich mehr relevant zu dieser Frage. Die beste Eigenschaft in Kürze wird der overflow-wrap. und der beste Wert, wenn es umgesetzt werden würde:

    * {
   overflow-wrap:hyphenate. 
}

    Doesen ' T scheinen, um unterstützt zu werden in keiner Weise nur noch an der Zeit des Schreibens auf dem iphone oder firefox, und overflow-wrap:Silbentrennung ist nicht einmal in der working draft.

    in der Zwischenzeit würde ich verwenden:

    p {
    word-wrap: break-word;
    -moz-hyphens:auto; 
    -webkit-hyphens:auto; 
    -o-hyphens:auto; 
    hyphens:auto; 
}

    InformationsquelleAutor der Antwort adriatiq

  5. 3
    display: block; 
overflow: hidden; 
text-overflow: ellipsis; 
width: 200px; //oder was auch immer für Sie am besten ist

    InformationsquelleAutor der Antwort jamiethepiper

  6. 3

    Ich den code für die Verhinderung alle langen strings, urls und so weiter..

     -ms-word-break: break-all;

/* Be VERY careful with this, breaks normal words wh_erever */
     word-break: break-all;

/* Non standard for webkit */
     word-break: break-word;
-webkit-hyphens: auto;
   -moz-hyphens: auto;
        hyphens: auto;

    InformationsquelleAutor der Antwort Roman Losev

  7. 2

    Hoffentlich eines Tages wir erhalten Zugriff auf die word-wrap - Eigenschaft in CSS3: Force Verpackung: die 'word-wrap' - Eigenschaft.

    Eines Tages...

    InformationsquelleAutor der Antwort Chad Birch

  8. 1

    Normalerweise Zellen tun dies natürlich, aber Sie zwingen könnte dieses Verhalten auf ein div mit:

    div {
  width: 950px;
  word-wrap: break-word;
  display: table-cell;
}

    InformationsquelleAutor der Antwort nikc

  9. 0

    Immer die Angabe line-height-Eigenschaft - wenn Sie nicht angeben, kann es passieren, dass der Ausfall Ihres word-break: break-all; Eigenschaft.

    InformationsquelleAutor der Antwort Shraddha Mohite

  10. 0

    Scheint es, dass dies funktioniert der trick für die neueste Chrome:

    [the element],
[the element] * {
  word-wrap: break-word;
  white-space: pre;
}

    Habe ich nicht überprüft-Browser, sondern Chrome.

    InformationsquelleAutor der Antwort SDMulroy

Schreibe einen Kommentar