Como posso quebrar ou quebrar um texto / palavra longa em um intervalo de largura fixa?


104

Quero criar um intervalo com uma largura fixa que, quando digito qualquer coisa no intervalo <span>lgasdfjksdajgdsglkgsadfasdfadfasdfadsfasdfasddkgjk</span>, como uma longa seqüência de texto sem espaçamento, a (s) palavra (s) quebra ou quebra na próxima linha.

Alguma ideia?

Respostas:


192

Você pode usar a propriedade CSS word-wrap:break-word;, que quebrará as palavras se forem muito longas para a largura do seu span.

span { 
    display:block;
    width:150px;
    word-wrap:break-word;
}
<span>VeryLongLongLongLongLongLongLongLongLongLongLongLongExample</span>


1
Funciona bem para o controle de rótulo do asp.net. Obrigado!
etlds

41
Adicionar white-space: normalajuda a substituir o estilo externo que pode atrapalhar :) .. inline-blockfunciona tão bem quantoblock
Katia

Que tal quebrar dois vãos que estão dentro de um elemento de bloco?
Daniel Springer,

Para aqueles que ainda estão tendo problemas após usar esta resposta, certifique-se de especificar uma 'largura', caso contrário, pode não funcionar
Staccato

Precisa ter uma largura para saber onde quebrar
DFSFOT

40

Tente seguir o css com adição de white-space:

span {
    display: block;
    word-wrap:break-word;
    width: 50px;
    white-space: normal
}

5
Obrigado! Eu não conseguia descobrir por que meu texto nunca quebrava! o espaço em branco era o motivo.
mdiehl13

1
Meu problema também foi corrigido quando coloquei:white-space: normal
majorBummer

Aqui está uma tabela de referência no caso de você precisar de espaço em branco e embalagem: css-tricks.com/almanac/properties/w/whitespace
Hritik

16

Como isso

DEMO

  li span{
    display:block;
    width:50px;
    word-break:break-all;
}

meu amigo eu quero quando colocar a largura do span: 50px; os valores em meu intervalo são exibidos apenas em 50px e os outros valores vão para a próxima linha e aparecem em 50px !!!
محمد کثیری

1
@ mamal10 Verifique a solução de Maxime Lorant.
Mr_Green

3

Por padrão, a spané um inlineelemento ... então esse não é o comportamento padrão.

Você pode fazer o spancomportamento dessa forma adicionando display: block;ao seu CSS.

span {
    display: block;
    width: 100px;
}


0

Apenas para estender o escopo prático da pergunta e como um apêndice às respostas dadas: Às vezes, pode ser necessário especificar um pouco mais os seletores.

Ao definir o intervalo completo como display: inline-block, você pode ter dificuldade em exibir imagens.

Portanto, prefiro definir um período assim:

span {
  display:block;
  width:150px;
  word-wrap:break-word;      
}
p span, a span,
h1 span, h2 span, h3 span, h4 span, h5 span {
  display:inline-block;
}
img{
  display:block;
}

0

No meu caso, display: block estava quebrando o design como pretendido.

A max-widthpropriedade acabou de me salvar.

e para estilização, você também pode usar text-overflow: ellipsis.

meu código era

max-width: 255px
overflow:hidden
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.