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

css border

— madhu131313
fonte

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

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