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


193

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?


17
Jak na ironię łańcuch nie pęka w przepełnieniu stosu albo ...
splattne

Odpowiedzi:


273

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>


Jest obsługiwany tylko w IE, Safari i FF3.1 (alpha).
Adam Bellaire

1
działa to tylko w nowej fali przeglądarek - patrz caniuse.com/#search=word-break
Michał Bernhard

9
@Michael: W odpowiedzi użyto reguły „zawijanie słów”, a nie „dzielenia słów”; ten pierwszy jest obsługiwany tak, jak jest używany w prawie każdej przeglądarce używanej obecnie. Tam, gdzie wskazane jest „częściowe wsparcie”, wydaje się, że wartość „rozbicia słowa” dla reguły „zawijania słów” jest nadal realna.
Robusto

2
Nazwa nieruchomości została zmieniona na overflow-wrapodtąd w standardach, ale wrod-wrapjest szeroko wdrażana.
Ciro Santilli 郝海东 冠状 病 六四 事件 法轮功

1
Współpracuje również z „display: table-cell”, był konieczny w moim przypadku
César León

107

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

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


4
Dobra rada, nauczyłem się dzisiaj czegoś nowego, dziękuję!
Matteo Conta

2
Dzięki za to rozwiązanie. Trudno mi było znaleźć coś takiego do pracy w tabeli, a to jedyne rozwiązanie, które znalazłem, działa w IE, Firefox i Chrome.
Farinha,

1
+1, działa to lepiej, ponieważ obejmuje więcej przypadków, nawet jeśli pytanie dotyczyło bardziej konkretnego przypadku.
montrealista

2
Możesz również użyć <wbr>tagu, który służy temu samemu celowi, zapewniając opcjonalną możliwość podziału linii.
justisb

7
Zobacz, czy robisz to w rzeczach, które można skopiować i wkleić.
alex

42

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;

4
Daj +1, ponieważ wspomina o podziale słów: break-all; który pracował dla mnie w IE9
Nick Benedict

3
word-break: break-all;był dla mnie jedynym, który działał w Android WebView.
Stan

Dziękuję word-break: break-all;!
Lonnie Best

18

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.


To mi nie zadziałało. Muszę przenieść właściwość „zawijanie słów” do div i usunąć właściwość „przepełnienie”. Dzięki tym zmianom działa.
danigonlinea

12

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&shy;AGCTGAAG&shy;CGCAGTGC&shy;GATGCTTC&shy;GATGATGC&shy;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.


Wow, nawet o tym nie wiedziałem. Schludny!
Daniel Schaffer

Ja też o tym nie wiedziałem. Double Neat!
Karl

11

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


Tak, # 3 tam działa we wszystkich nowoczesnych przeglądarkach, a nawet starszych IE6 +.
Graeck

1
# 3 działa tylko wtedy, gdy istnieje możliwość podzielenia się słowami. Zbyt długi ciąg nie pęka (testowane w Chrome 52.0.2743.82).
Collapsar


5

Ż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.


3

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,"&lt;br&gt;",true);

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


Możesz mieszać to rozwiązanie z rozwiązaniem Remy'ego, aby wstawiać spacje o zerowej szerokości: wordwrap ($ longtext, 5, "& # 8203;", true);
MV.

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

3

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, &#8203;co może powodować problemy podczas kopiowania tekstu.


2

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

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

1

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

width:100%;
float:left;

Jest to kompletna i łatwa odpowiedź. Myślę, że facet, który pierwotnie opublikował ten problem, powinien użyć szerokości: 100%; z pływakiem: lewy; na elemencie zawierającym ten ciąg i jego problem zostanie rozwiązany. dlaczego więc ta odpowiedź nie jest istotna?
TechBrush.Org

ponieważ ten facet, który opublikował ten problem, nie sądzi, żeby twoje rozwiązanie działało pięć lat temu.
Pierre,

2
Tak, ale na tym forum nie chodzi tylko o tego faceta, chodzi tylko o to forum, a inni ludzie, którzy borykają się z podobnymi problemami, jak ja, mogą również korzystać z tego samego.
TechBrush.Org
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.