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

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;
}

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