it-swarm.com.de

CSS: Wie kann ich eine lange Zeichenfolge (ohne Leerzeichen) zwingen, in XUL und/oder HTML einzugeben

Ich habe eine lange Saite (eine DNA-Sequenz). Es enthält keine Leerzeichen. z.B.: 

ACTGATCGAGCTGAAGCGCAGTGCGATGCTTCGATGATGCTGACGATGCTACGATGCGAGCATCTACGATCAGTCGATGTAGCTAGTAGCATGTAGTGA

was wäre der CSS-Selektor, um zu erzwingen, dass dieser Text in einem HTML-Textfeld oder einem XUL-Textfeld eingeschlossen wird

169
Pierre

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>

246
heeen

Platzieren Sie Felder mit Nullbreite an den Punkten, an denen Sie Unterbrechungen zulassen möchten. Das Leerzeichen mit der Breite Null ist in HTML &#8203;. Zum Beispiel:

ACTGATCG&#8203;AGCTGAAG&#8203;CGCAGTGC&#8203;GATGCTTC&#8203;GATGATGC

101
Remy Blank

Hier sind einige sehr nützliche Antworten:

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

um 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;
34
emik

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 anstelle von td auch ein div innerhalb eines anderen div verwenden. Ich habe overflow:auto verwendet, da der gesamte Text in meinen Browsern Opera und IE angezeigt wird.

18
Rani

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

ACTGATCG&shy;AGCTGAAG&shy;CGCAGTGC&shy;GATGCTTC&shy;GATGATGC&shy;TGACGATG

Dadurch wird am Ende der Zeile ein Bindestrich angezeigt, an dem der Zeilenumbruch erfolgt. Dies kann der gewünschte sein oder nicht.

Hinweis Safari scheint die lange Zeichenfolge im Gegensatz zu Firefox trotzdem in einen <textarea> einzuhüllen.

12
Peter Hilton

Verwenden Sie eine CSS-Methode, um das Umbrechen einer Zeichenfolge zu erzwingen, die keine Leerzeichen enthält. Drei Methoden:

1) Verwenden Sie die CSS-White-Space-Eigenschaft. Um Browser-Inkonsistenzen zu behandeln, müssen Sie mehrere Möglichkeiten angeben. Fügen Sie einfach Ihren langen String in ein Block-Level-Element ein (z. B. div, pre, p) und geben Sie diesem Element die 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 mir das auch angesehen und denke, es könnte auch funktionieren (aber ich muss die Browserunterstützung vollständiger testen):

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

Referenz: Inhalt einwickeln

10
Graeck

Mein Weg zu gehen (wenn es keine geeignete Möglichkeit gibt, spezielle Zeichen 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.

7
Ben

Damit Word-wrap:break-Word; für mich funktioniert, musste ich sicherstellen, dass display auf block gesetzt war und dass die Breite für das Element festgelegt war. In Safari musste ein p-Tag vorhanden sein und die width musste in ex gesetzt werden.

5
innerurge
<textarea style="width:100px; Word-wrap:break-Word;">
  place your text here
</textarea>
3
user5217984

Wenn Sie PHP verwenden, funktioniert die Wordwrap-Funktion gut: http://php.net/manual/de/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 Wordwrap-Funktion PHP:

$string = "ACTGATCGAGCTGAAGCGCAGTGCGATGCTTCGATGATGCTGACGATGCTACGATGCGAGCATCTACGATCAGTCGATGTAGCTAGTAGCATGTAGTGA";

$wrappedstring = wordwrap($string,50,"&lt;br&gt;",true);

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

3
Dave

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

style="width:110px; Word-break: break-all;"
2
rakpan

einfach width einstellen und float hinzufügen, das hat für mich funktioniert

width:100%;
float:left;
1
TechBrush.Org

Verwenden Sie <wbr> tag:

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

Ich denke, das ist besser als die Verwendung von Leerzeichen &#8203;, das Probleme verursachen könnte, wenn Sie den Text kopieren.

0
warvariuc