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


193

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?


17
Ironicamente, a cadeia não quebrar no Stack Overflow ou ...
splattne

Respostas:


273

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>


É suportado apenas no IE, Safari e FF3.1 (alpha).
31511 Adam Bellaire

1
isso funciona somente em nova onda de navegadores - ver caniuse.com/#search=word-break
Michal Bernhard

9
@ Michael: A resposta usa a regra "quebra de linha", não a regra "quebra de palavra"; o primeiro é suportado como usado em quase todos os navegadores usados ​​atualmente. Onde "suporte parcial" é indicado, parece que o valor "quebra de palavra" para a regra "quebra de linha" ainda é viável.
Robusto

2
A propriedade foi renomeada overflow-wrapdesde então nos padrões, mas wrod-wrapé amplamente implementada.
Ciro Santilli publicou

1
Também funciona com "display: table-cell", era necessário no meu caso
César León

107

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

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


4
Boa sugestão, eu aprendi algo novo hoje, obrigado!
Matteo Conta

2
Obrigado por esta solução. Foi difícil conseguir que algo assim funcionasse dentro de uma tabela, e essa solução é a única que encontrei funciona no IE, Firefox e Chrome.
Farinha

1
+1, isso funciona melhor, pois abrange mais casos, mesmo que a pergunta fosse para um caso mais específico.
montrealist

2
Como alternativa, você pode usar a <wbr>tag, que tem o mesmo objetivo de fornecer uma oportunidade opcional de quebra de linha.
justisb

7
Observe se você faz isso em coisas que podem ser copiadas e coladas.
alex

42

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;

4
+1 isto porque menciona quebra de palavras: quebra de tudo; que funcionou para mim no IE9
Nick Benedict

3
word-break: break-all;foi o único que funcionou no Android WebView para mim.
Stan

Obrigado por word-break: break-all;!
Lonnie Melhor

18

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.


Isto não funcionou para mim. Eu tenho que mover a propriedade "word-wrap" para div e remover a propriedade "overflow". Com essas mudanças, funciona.
Danigonlinea

12

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


Uau, nem sabia disso. Arrumado!
Daniel Schaffer

Também não sabia disso. Double Neat!
Karl

11

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


Sim, o nº 3 funciona em todos os navegadores modernos e no IE6 + ainda mais antigo.
Graeck

1
O nº 3 só funciona se houver oportunidades de quebra de palavras. Uma cadeia excessivamente longa não quebra (testada no Chrome 52.0.2743.82).
Collapsar

8

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


5

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.


3

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


Você pode misturar esta solução com a solução de Remy para inserir espaços com largura zero: wordwrap ($ longtext, 5, "& # 8203;", true);
MV.

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

3

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 &#8203;que pode causar problemas quando você copia o texto.


2

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;"

1

apenas definir widthe adicionar floatfuncionou para mim :-)

width:100%;
float:left;

É uma resposta completa e fácil, acho que o cara que postou esse problema originalmente deve usar width: 100%; com bóia: esquerda; no elemento que contém essa string e seu problema será resolvido. então por que essa resposta não é relevante?
TechBrush.Org

porque o cara que postou esse problema não acha que sua solução funcionou cinco anos atrás.
7774 Pierre

2
Sim, mas este fórum não é apenas sobre esse cara, é sobre esse fórum e outras pessoas que enfrentam problemas semelhantes aos meus hoje também podem se beneficiar do mesmo.
TechBrush.Org
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.