Como forçar uma corda longa sem deixar espaço em branco?

Eu tenho uma longa corda (uma sequência de DNA). Ele não contém nenhum caractere de espaço em branco.

Por exemplo:

ACTGATCGAGCTGAAGCGCAGTGCGATGCTTCGATGATGCTGACGATGCTACGATGCGAGCATCTACGATCAGTCGATGTAGCTAGTAGCATGTAGTGA

Qual seria o seletor de CSS para forçar a inclusão deste texto em um html:textareaou em um xul:textbox?

para elementos de bloco:

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

para elementos em linha:

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

Coloque espaços de largura zero nos pontos em que deseja permitir quebras. O espaço de largura zero está ​em HTML. Por exemplo:

ACTGATCG​AGCTGAAG​CGCAGTGC​GATGCTTC​GATGATGC

Aqui estão algumas respostas muito úteis:

Como impedir que palavras longas quebrem minha div?

para economizar seu tempo, isso pode ser resolvido com o 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;

Para mim isso funciona,

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

Você também pode usar uma div dentro de outra div em vez de td. Eu usei overflow:auto, pois mostra todo o texto nos navegadores Opera e IE.

Eu não acho que você pode fazer isso com CSS. Em vez disso, em 'comprimentos de palavra' regulares ao longo da cadeia, insira um hífen suave em HTML:

ACTGATCG­AGCTGAAG­CGCAGTGC­GATGCTTC­GATGATGC­TGACGATG

Isso exibirá um hífen no final da linha, onde será agrupado, que pode ou não ser o que você deseja.

Nota O Safari parece envolver a longa string de <textarea>qualquer maneira, diferente do Firefox.

Use um método CSS para forçar a quebra de uma sequência que não possui espaços em branco. Três métodos:

1) Use a propriedade de espaço em branco CSS. Para cobrir as inconsistências do navegador, você deve declará-lo de várias maneiras. Então, basta colocar sua string looooong em algum elemento de nível de bloco (por exemplo, div, pre, p) e fornecer a esse elemento o seguinte 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) use a mixagem force-wrap da Compass .

3) Eu estava analisando isso também e acho que também pode funcionar (mas preciso testar o suporte ao navegador mais completamente):

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

Referência: conteúdo de embalagem

Meu caminho a percorrer (quando não há uma maneira apropriada de inserir caracteres especiais) via 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;

Como encontrado aqui: http://kenneth.io/blog/2012/03/04/word-wrapping-hypernation-using-css/ com algumas pesquisas adicionais a serem encontradas lá.

Para word-wrap:break-word;trabalhar para mim, eu tinha que ter certeza de que displayestava definido como blocke que a largura estava definida no elemento. No Safari, era necessário ter uma petiqueta e widthela precisava ser configurada ex.

Se você estiver usando PHP, a função wordwrap funciona bem para isso: http://php.net/manual/en/function.wordwrap.php

A solução CSS word-wrap: break-word; não parece ser consistente em todos os navegadores.

Outros idiomas do lado do servidor têm funções semelhantes - ou podem ser construídos manualmente.

Veja como a função wordwrap do PHP funciona:

$string = "ACTGATCGAGCTGAAGCGCAGTGCGATGCTTCGATGATGCTGACGATGCTACGATGCGAGCATCTACGATCAGTCGATGTAGCTAGTAGCATGTAGTGA";

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

Isso envolve a seqüência de caracteres em 50 caracteres com uma tag <br>. O parâmetro 'true' força a cadeia a ser cortada.

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

Use a <wbr>tag:

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

Eu acho que isso é melhor do que usar espaço de largura zero, o ​que pode causar problemas quando você copia o texto.

Em um caso em que a tabela não é de tamanho fixo, a linha abaixo funcionou para mim:

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

apenas definir widthe adicionar floatfuncionou para mim :-)

width:100%;
float:left;