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?

html css محمد کثیری
fonte

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>
Expandir trecho

Maxime Lorant
fonte
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
}
Gerard de Visser
fonte
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;
}
Falguni Panchal
fonte
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;
}

fonte
1

Tente isto

span {
    display: block;
    width: 150px;
}
Eswara Reddy
fonte
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;
}
leopold
fonte
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
sh6210
fonte