texto fluindo de div

98

Quando o texto não tem espaços e tem mais do que o tamanho div de 200px, ele está fluindo A largura é definida como 200px. Coloquei meu código aqui http://jsfiddle.net/madhu131313/UJ6zG/ Você pode ver as fotos editadas abaixo : Eu quero o texto para ir para a próxima linha

insira a descrição da imagem aqui

insira a descrição da imagem aqui

madhu131313
fonte

Respostas:

172

É devido ao fato de você ter uma palavra longa sem espaços. Você pode usar a word-wrappropriedade para quebrar o texto:

#w74 { word-wrap: break-word; }

Ele também tem um suporte de navegador bastante bom. Veja a documentação sobre isso aqui .

Chipcullen
fonte
3
não funcionou para mim aqui é outro exemplo.
Deepak Vaishnav
isto é incrível, resolveu alguns problemas na página responsiva
yussan,
Que solução limpa e fácil. Obrigado por compartilhar isso.
Dzenis H.
108

Usar

white-space: pre-line;

Isso impedirá que o texto flua para fora do div. Isso quebrará o texto quando chegar ao final do div.

Nixon
fonte
28

Você deve usar overflow:hidden; ouscroll

http://jsfiddle.net/UJ6zG/1/

ou com php você poderia encurtar as palavras longas ...


fonte
Incrível, desculpe mencionar que quero que vá para a próxima linha, como bate-papo do gmail ou bate-papo do Facebook :)
madhu131313
Então você pode usar a versão de @chipcullen com quebra de linha! demonstração: jsfiddle.net/UJ6zG/3
8

Você precisa aplicar a seguinte propriedade CSS ao bloco de contêiner (div):

overflow-wrap: break-word;

De acordo com as especificações (fonte CSS | MDN ):

A overflow-wrappropriedade CSS especifica se o navegador deve ou não inserir quebras de linha nas palavras para evitar que o texto transborde de sua caixa de conteúdo.

Com o valor definido para break-word

Para evitar o estouro, palavras normalmente inquebráveis ​​podem ser quebradas em pontos arbitrários se não houver pontos de quebra aceitáveis ​​na linha.

Vale a pena mencionar...

A propriedade era originalmente chamada de uma extensão não padrão e sem prefixo da Microsoft word-wrape foi implementada pela maioria dos navegadores com o mesmo nome. Desde então, foi renomeado para overflow-wrap, word-wrapsendo um alias.


Se você se preocupa com o suporte a navegadores legados, vale a pena especificar ambos:

word-wrap    : break-word;
overflow-wrap: break-word;

Ex. IE9 não reconhece, overflow-wrapmas funciona bem comword-wrap

Paolo
fonte
Obrigado, funcionou para mim. Você escreveu "With the value set to break-world" - Tenho certeza de que quis dizer "break-word" sem o "l", espero que não tenha pretendido quebrar o mundo;)
Jake Neumann
7

use overflow:auto-o para dar uma rolagem ao seu texto dentro de div:).

Rahul Razdan
fonte
4

Se isso ajudar. Adicione a seguinte propriedade com valor ao seu seletor:

white-space: pre-wrap;
Martin Lloyd Jose
fonte
2

Isso funcionou para mim:

{word-break: break-all; }

Addo
fonte
1
muito obrigado, esta foi a única coisa que funcionou para o meu (usando componentes estilizados no React)
mlz7
0

eu recentemente encontrei isso. Eu usei:display:block;

arn-arn
fonte
-6

Se for apenas uma instância que precisa ser quebrada em 2 ou 3 linhas, eu usaria apenas algumas <wbr>na string. Ele os tratará exatamente como, <br>mas não inserirá a quebra de linha se não for necessário.

<div id="w74" class="dpinfo">
adsfadsadsads<wbr>fadsadsadsfadsadsa<wbr>dsfadsadsadsfadsadsads<wbr>fadsadsadsfadsadsadsfa<wbr>dsadsadsfadsadsadsfadsad<wbr>sadsfadsadsads<wbr>fadsadsadsfadsads adsfadsads
</div>

Aqui está um violino.

http://jsfiddle.net/gaby_de_wilde/UJ6zG/37/

gaby de wilde
fonte