Jak mogę zmusić długi sznur bez zawijania?

Mam długi ciąg (sekwencja DNA). Nie zawiera żadnych białych znaków.

Na przykład:

ACTGATCGAGCTGAAGCGCAGTGCGATGCTTCGATGATGCTGACGATGCTACGATGCGAGCATCTACGATCAGTCGATGTAGCTAGTAGCATGTAGTGA

Jaki byłby selektor CSS, aby zmusić ten tekst do zawinięcia w a html:textarealub w xul:textbox?

dla elementów blokowych:

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

dla elementów wbudowanych:

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

Umieść spacje o zerowej szerokości w punktach, w których chcesz dopuścić przerwy. Przestrzeń o zerowej szerokości jest ​w formacie HTML. Na przykład:

ACTGATCG​AGCTGAAG​CGCAGTGC​GATGCTTC​GATGATGC

Oto kilka bardzo przydatnych odpowiedzi:

Jak zapobiec łamaniu div przez długie słowa?

Aby zaoszczędzić czas, można to rozwiązać za pomocą css:

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;

Dla mnie to działa,

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

Możesz również użyć div wewnątrz innego div zamiast td. Użyłem overflow:auto, ponieważ pokazuje cały tekst zarówno w mojej przeglądarce Opera, jak i IE.

Nie sądzę, że możesz to zrobić za pomocą CSS. Zamiast tego, w regularnych „długościach słów” wzdłuż łańcucha, wstaw miękki łącznik HTML:

ACTGATCG­AGCTGAAG­CGCAGTGC­GATGCTTC­GATGATGC­TGACGATG

Spowoduje to wyświetlenie łącznika na końcu wiersza, w którym jest on zawijany, co może, ale nie musi być tym, czego chcesz.

Uwaga Safari wydaje się i tak owijać długi łańcuch, w <textarea>przeciwieństwie do Firefoksa.

Użyj metody CSS, aby wymusić zawijanie łańcucha bez białych znaków. Trzy metody:

1) Użyj właściwości białych znaków CSS. Aby zakryć niespójności przeglądarki, musisz to zadeklarować na kilka sposobów. Więc po prostu umieść łańcuch looooong w jakimś elemencie na poziomie bloku (np. Div, pre, p) i nadaj temu elementowi następujący 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) użyj mixinu z zawijaniem wymuszonym z Compass .

3) Właśnie się tym zajmowałem i myślę, że może również działać (ale muszę przetestować obsługę przeglądarki bardziej szczegółowo):

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

Odniesienie: zawijanie treści

Moja droga (gdy nie ma odpowiedniego sposobu wstawiania specjalnych znaków) za pomocą 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;

Znajduje się tutaj: http://kenneth.io/blog/2012/03/04/word-wrapping-hypernation-using-css/ z dodatkowymi badaniami, które można tam znaleźć.

Żeby word-wrap:break-word;dla mnie zadziałało, musiałem się upewnić, że displayustawiono na blocki że szerokość elementu była ustawiona. W Safari musiał mieć ptag i widthtrzeba było go ustawić ex.

Jeśli używasz PHP, funkcja Wordwrap działa dobrze w tym celu: http://php.net/manual/en/function.wordwrap.php

Rozwiązanie CSS word-wrap: break-word; nie jest spójne we wszystkich przeglądarkach.

Inne języki po stronie serwera mają podobne funkcje - lub można je tworzyć ręcznie.

Oto jak działa funkcja zawijania słów w PHP:

$string = "ACTGATCGAGCTGAAGCGCAGTGCGATGCTTCGATGATGCTGACGATGCTACGATGCGAGCATCTACGATCAGTCGATGTAGCTAGTAGCATGTAGTGA";

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

Spowoduje to zawinięcie ciągu o długości 50 znaków tagiem <br>. Parametr „true” wymusza przecięcie łańcucha.

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

Użyj <wbr>tagu:

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

Myślę, że jest to lepsze niż używanie miejsca o zerowej szerokości, ​co może powodować problemy podczas kopiowania tekstu.

W przypadku, gdy tabela nie ma ustalonego rozmiaru, działała dla mnie linia poniżej:

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

tylko ustawienie widthi dodanie floatdziałało dla mnie :-)

width:100%;
float:left;