Como texto em quebra de linha em HTML?


185

Como pode um texto como o aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaque excede a largura de um div(digamos200px ) pode ser quebrado?

Estou aberto a qualquer tipo de solução, como CSS, jQuery, etc.

Respostas:


240

Tente o seguinte:

div {
    width: 200px;
    word-wrap: break-word;
}

1
Estou enganado ou a quebra de linha é uma propriedade do CSS3?
22620 Gab Royer

13
É CSS3, mas funciona em quase todos os navegadores principais, incluindo IE5.5 -> 9 - caniuse.com/#search=word-wrap
Jon Hadley

32
Quando quebra de linha: quebra de palavra; não funciona tente quebra de palavra: quebra tudo; / * este é um assassino * /
redochka

@redochka Mas ao usar word-break: break-all;o texto normal, ele quebra as palavras no meio, o que é feio ... Não podemos ter uma mistura dos dois comportamentos?
pawamoy

5
Importante: é word-break: break-alle não word-wrap: break-all. Erro fácil de cometer #
616 Simon_Weaver

58

No bootstrap 3, verifique se o espaço em branco não está definido como 'nowrap'.

div {
  width: 200px;
  word-break: break-all;
  white-space: normal;
}

Ótimo. Tentei usar o word-break: break-all em um corpo do painel do Twitter Bootstrap 3, mas nunca funcionou. Adicionando espaço em branco: normal foi a correção.
coolboyjules

5
Bom, eu white-space: normal;também precisava antes que funcionasse.
Radbyx

56

Você pode usar um hífen suave da seguinte maneira:

aaaaaaaaaaaaaaa­aaaaaaaaaaaaaaa

Isso aparecerá como

aaaaaaaaaaaaaaa-
aaaaaaaaaaaaaaa

se a caixa de contenção não for grande o suficiente ou

aaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

se for


18
Mas como você vai saber onde colocar o ­?
Kostas

Você o coloca em palavras longas, onde elas podem ser divididas. Você pode até obter essas informações automaticamente de um dicionário adequado.
Kim Stebel

4
Mas, que tal bobagens como a do exemplo? É ok para transformar aaaaaa...aaaaaem a­a­a­a­a­a­a...a­a­a­a?
Kostas

19
Exatamente o que eu estava procurando. Eu gosto que ele é tímido demais para fazer qualquer coisa até que ela tem que ;-)
w00t

3
isso funciona bem se a palavra a ser quebrada for um nome excessivamente longo, java.package.name ou alguma sequência semelhante com muitos pontos. então você pode adicionar o & shy; depois de cada ponto.
Dokaspar 29/08/2012

28
   div {
    // set a width
    word-wrap: break-word
}

O 'word-wrap solução ' funciona apenas no IE e navegadores compatíveisCSS3 .

A melhor solução entre navegadores é usar a linguagem do lado do servidor (php ou o que for) para localizar seqüências longas e colocar dentro delas em intervalos regulares a entidade html ​ Essa entidade quebra bem as palavras longas e funciona em todos os navegadores.

por exemplo

aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa​aaaaaaaaaaaaaaaaaaaaaaaaaaaaa

8
"coloque dentro deles em intervalos regulares a entidade html # 8203" mas quando você tenta copiar o texto e colá-lo em algum lugar, você terá um caractere Unicode aleatório no meio
user102008 30/10/11

9

O único que funciona no IE, Firefox, chrome, safari e opera se não houver espaços na palavra (como uma URL longa) é:

div{
    width: 200px;  
    word-break: break-all;
}

Eu achei isso à prova de balas.


9

Isso funcionou para mim

word-wrap: normal;
word-break: break-all;
white-space: normal;
display: block;
height: auto;
margin: 3px auto;
line-height: 1.4;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;

6

Outra opção também está usando:

div
{
   white-space: pre-line;
}

Isso definirá todos os seus elementos div em todos os navegadores que suportam CSS1 (que é praticamente todos os navegadores comuns desde o IE 8)


Se você tem um <pre>elemento que deseja incluir quebra de linha, isso funciona word-breakou word-wrapnão.
Plutão

4

Navegador Cruzado

.wrap
{
    white-space: pre-wrap; /* css-3 */    
    white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
    white-space: -pre-wrap; /* Opera 4-6 */    
    white-space: -o-pre-wrap; /* Opera 7 */    
    word-wrap: break-word; /* Internet Explorer 5.5+ */
}

2

Adicione este CSS ao parágrafo.

style="width:420px; 
min-height:15px; 
height:auto!important; 
color:#666; padding: 1%; 
font-size: 14px; 
font-weight: normal;
word-wrap: break-word; 
text-align: left" 

2
Eu gosto text-overflow:ellipsistanto quanto do próximo cara, mas não é uma resposta correta para esta pergunta. Ele está procurando por quebra de linha, não truncar o excesso.
Spudley

1

Exemplo de truques CSS :

div {
    -ms-word-break: break-all;

    /* Be VERY careful with this, breaks normal words wh_erever */
    word-break: break-all;

    /* Non standard for webkit */
    word-break: break-word;

    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    hyphens: auto;
}

Mais exemplos aqui .


0

Uma solução do lado do servidor que funciona para mim é: $message = wordwrap($message, 50, "<br>", true);onde $messageestá uma variável de string que contém a palavra / caracteres a serem divididos. 50 é o comprimento máximo de qualquer segmento e "<br>"é o texto que você deseja inserir a cada (50) caracteres.


4
Esta solução não funcionará se 50 vezes a largura do caractere for maior que o máximo necessário de 200px. Basta usar a função de zoom do seu navegador e você eventualmente vê-lo quebrar ...
dokaspar

0

Tente isto

div{
  display: block;
  display: -webkit-box;
  height: 20px;
  margin: 3px auto;
  font-size: 14px;
  line-height: 1.4;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

a propriedade overflow de texto: reticências add ... e line-clamp mostram o número de linhas.


0

No corpo HTML, tente:

<table>
    <tr>
        <td>
            <div style="word-wrap: break-word; width: 800px">
                Hello world, how are you? More text here to see if it wraps after a long while of writing and it does on Firefox but I have not tested it on Chrome yet. It also works wonders if you have a medium to long paragraph. Just avoid writing in the CSS file that the words have to break-all, that's a small tip.
            </div>
        </td>
    </tr>
</table>

No corpo do CSS, tente:

background-size: auto;

table-layout: fixed;


0

Eu usei o bootstrap. Meu código html parece ..

<div class="container mt-3" style="width: 100%;">
  <div class="row">
    <div class="col-sm-12 wrap-text">
      <h6>
        text content
      </h6>
    </div>
  </div>
</div>

CSS

.wrap-text {
     text-align:justify;
}

Bootstrap tem text-justifyclasse, para que você possa usá-lo em vez de.wrap-text
barbsan



-2

Use o word-wrap:break-wordatributo junto com a largura necessária. Coloque principalmente a largura em pixels, não em porcentagens.

width: 200px;
word-wrap: break-word;

14
Isso é idêntico à resposta acima. Porque se importar?
trgraglia
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.