Wie kann ich erzwingen, dass eine lange Zeichenfolge ohne Leerzeichen umwickelt wird?

Ich habe einen langen String (eine DNA-Sequenz). Es enthält kein Leerzeichen.

Beispielsweise:

ACTGATCGAGCTGAAGCGCAGTGCGATGCTTCGATGATGCTGACGATGCTACGATGCGAGCATCTACGATCAGTCGATGTAGCTAGTAGCATGTAGTGA

Was wäre der CSS-Selektor, um zu erzwingen, dass dieser Text in a html:textareaoder in a eingeschlossen wird xul:textbox?

für Blockelemente:

<textarea style="width:100px; word-wrap:break-word;">
  ACTGATCGAGCTGAAGCGCAGTGCGATGCTTCGATGATGCTGACGATGCTACGATGCGAGCATCTACGATCAGTC
</textarea>

für Inline-Elemente:

<span style="width:100px; word-wrap:break-word; display:inline-block;"> 
   ACTGATCGAGCTGAAGCGCAGTGCGATGCTTCGATGATGCTGACGATGCTACGATGCGAGCATCTACGATCAGTC
</span>

Platzieren Sie Leerzeichen mit der Breite Null an den Stellen, an denen Sie Unterbrechungen zulassen möchten. Der Raum mit der Breite Null ist ​in HTML. Beispielsweise:

ACTGATCG​AGCTGAAG​CGCAGTGC​GATGCTTC​GATGATGC

Hier sind einige sehr nützliche Antworten:

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

Um Ihnen Zeit zu sparen, kann dies mit CSS gelöst werden:

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 */
word-break: break-all;

Für mich funktioniert das,

<td width="170px" style="word-wrap:break-word;">
  <div style="width:140px;overflow:auto">
    LONGTEXTGOESHERELONGDIVGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESHERELONGDIVLONGTEXTLONGTEXT
  </div>
</td>

Sie können auch ein div in einem anderen div anstelle von verwenden td. Ich habe verwendet overflow:auto, da es den gesamten Text sowohl in meinem Opera- als auch in meinem IE-Browser anzeigt.

Ich glaube nicht, dass Sie dies mit CSS tun können. Fügen Sie stattdessen bei regulären Wortlängen entlang der Zeichenfolge einen HTML-Bindestrich ein:

ACTGATCG­AGCTGAAG­CGCAGTGC­GATGCTTC­GATGATGC­TGACGATG

Daraufhin wird am Ende der Zeile ein Bindestrich angezeigt, der umbrochen wird und möglicherweise Ihren Wünschen entspricht oder nicht.

Hinweis Im <textarea>Gegensatz zu Firefox scheint Safari die lange Zeichenfolge ohnehin in eine zu wickeln .

Verwenden Sie eine CSS-Methode, um das Umbrechen einer Zeichenfolge ohne Leerzeichen zu erzwingen. Drei Methoden:

1) Verwenden Sie die CSS-Leerraum-Eigenschaft. Um Browser-Inkonsistenzen abzudecken, müssen Sie dies auf verschiedene Arten deklarieren. Fügen Sie also einfach Ihre lange Zeichenfolge in ein Element auf Blockebene ein (z. B. div, pre, p) und geben Sie diesem Element das folgende CSS:

some_block_level_tag {
    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+ */
}

2) Verwenden Sie das Force-Wrap-Mixin von Compass .

3) Ich habe mich auch nur damit befasst und denke, dass es auch funktionieren könnte (aber ich muss die Browserunterstützung vollständiger testen):

.break-me {
    word-wrap: break-word;
    overflow-wrap: break-word;
}

Referenz: Inhalt umbrechen

Mein Weg (wenn es keinen geeigneten Weg gibt, Sonderzeichen einzufügen) über CSS:

-ms-word-break: break-all;
word-break: break-all;
word-break: break-word;
-webkit-hyphens: auto;
-moz-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;

Wie hier zu finden: http://kenneth.io/blog/2012/03/04/word-wrapping-hypernation-using-css/ mit einigen zusätzlichen Recherchen, die dort zu finden sind.

Um word-wrap:break-word;für mich arbeiten zu können, musste ich sicherstellen, dass das displayauf eingestellt blockwar und dass die Breite für das Element eingestellt war. In Safari musste es ein pTag haben und das widthmusste gesetzt werden ex.

Wenn Sie PHP verwenden, funktioniert die Wordwrap-Funktion gut dafür: http://php.net/manual/en/function.wordwrap.php

Die CSS-Lösung word-wrap: break-word;scheint nicht in allen Browsern konsistent zu sein.

Andere serverseitige Sprachen haben ähnliche Funktionen - oder können von Hand erstellt werden.

So funktioniert die PHP-Zeilenumbruchfunktion:

$string = "ACTGATCGAGCTGAAGCGCAGTGCGATGCTTCGATGATGCTGACGATGCTACGATGCGAGCATCTACGATCAGTCGATGTAGCTAGTAGCATGTAGTGA";

$wrappedstring = wordwrap($string,50,"<br>",true);

Dies umschließt die Zeichenfolge mit 50 Zeichen mit einem <br> -Tag. Der Parameter 'true' erzwingt das Schneiden der Zeichenfolge.

<textarea style="width:100px; word-wrap:break-word;">
  place your text here
</textarea>

Verwenden <wbr>tag:

ACTGATCG<wbr>AGCTGAAG<wbr>CGCAGTGC<wbr>GATGCTTC<wbr>GATGATGC

Ich denke, dies ist besser als die Verwendung von Leerzeichen mit einer Breite von Null, ​was beim Kopieren des Textes zu Problemen führen kann.

In einem Fall, in dem die Tabelle keine feste Größe hat, hat die folgende Zeile für mich funktioniert:

style="width:110px; word-break: break-all;"

Nur das Setzen widthund Hinzufügen floathat bei mir funktioniert :-)

width:100%;
float:left;