Como palavra-break em uma pitada?

votos
60

Dada a CSS relativamente simples:

div {
  width: 150px;
}
<div>
  12333-2333-233-23339392-332332323
</div>

Como posso fazer isso para que a cadeia fica restrito ao widthde 150 , e simplesmente passará para uma nova linha na hífen?

Publicado 04/08/2008 em 01:17
fonte usuário
Em outras línguas...                            


11 respostas

votos
63

Substitua seus hífens com este:

&shy;

É chamado um hífen "soft".

div {
  width: 150px;
}
<div>
  12333&shy;2333&shy;233&shy;23339392&shy;332332323
</div>

Respondeu 04/08/2008 em 01:25
fonte usuário

votos
31

Em todos os navegadores modernos * (e em alguns navegadores mais antigos , também), o <wbr>elemento é a ferramenta perfeita para proporcionar a oportunidade de quebrar palavras longas em pontos específicos.

Para citar a partir desse link:

A quebra de palavra Opportunity ( <wbr>elemento HTML) representa uma posição dentro do texto onde o navegador pode opcionalmente quebrar uma linha, embora suas regras de quebra de linha de outra forma não criar uma pausa naquele local.

Veja como ela poderia ser usada no exemplo do OP (ou vê-lo em ação no jsFiddle ):

<div style="width: 150px;">
  12333-<wbr>2333-<wbr>233-<wbr>23339392-<wbr>332332323
</div>

* Eu testei no IE9, IE10, e as últimas versões do Chrome, Firefox e Opera e Safari.

div {
  width: 150px;
}
<div>
  12333-<wbr>2333-<wbr>233-<wbr>23339392-<wbr>332332323
</div>

Respondeu 30/01/2012 em 07:53
fonte usuário

votos
17

Como parte do CSS3, ele ainda não é totalmente suportado, mas você pode encontrar informações sobre a palavra-wrapping aqui . Outra opção é o tag wbr, & shy ;, e & # 8203; nenhum dos quais são totalmente suportados quer.

Respondeu 04/08/2008 em 01:25
fonte usuário

votos
8

Neste caso específico (onde sua seqüência vai conter hífens) Eu transformar o texto a este do lado do servidor:

<div style="width:150px;">
  <span>12333-</span><span>2333-</span><span>233-</span><span>23339392-</span><span>332332323</span>
</div>
Respondeu 05/12/2008 em 13:36
fonte usuário

votos
8

Seu exemplo funciona como esperado no Google Chrome, Safari (Windows), e IE8. O texto quebra da caixa de 150px no Firefox 3 e Opera 9.5.

Além disso &shy;não vai funcionar para o seu exemplo, como ele quer:

  • funciona quando quebra de palavra, mas quando não palavra de quebra de não exibir quaisquer hífens, ou

  • trabalho quando não-palavra quebrar, mas exibição dois hífens quando a palavra-quebrando uma vez que adiciona um hífen em uma ruptura.

Respondeu 16/09/2008 em 00:15
fonte usuário

votos
7

Dependendo do que você quer ver exatamente, você pode usar uma combinação de hyphen, soft hyphene / ou zero width space.

Em um hífen, seu navegador pode palavra-break (adicionando um hífen). Em um espaço de largura zero, seu navegador pode palavra pausa (sem acrescentar nada).

Assim, se o seu código é algo como:

111111&shy;222222&shy;-333333&#8203;444444-&#8203;555555

em seguida, o navegador irá mostrar isso com nenhuma palavra-break:

1111112222222-33333334444444-5555555

e isso vai cada possível palavra-break:

111111-
222222-
-333333
444444-
555555

Basta escolher a opção que você precisa. No seu caso, pode ser o único entre 4s e 5s.

Respondeu 16/09/2010 em 10:04
fonte usuário

votos
1

Você também pode usar :

word-break:break-all;

ex.

<div style='width:10px'>ababababababbabaabababababababbabababa</div>

saída:

abababababa
ababababbba
abbabbababa
ababb

palavra-break é quebrar toda a palavra ou linha, mesmo se não houver espaço na frase que não feets em largura ou altura fornecido. porca para que você deve ser fornecer uma largura ou altura.

Respondeu 27/08/2015 em 12:40
fonte usuário

votos
0

Você pode usar 0 espaço de largura depois de hífen:

div {
  width: 150px;
}
<div>
  12333-&#8203;2333-&#8203;233-&#8203;23339392-&#8203;332332323
</div>

se você quer quebra de linha antes hífen usar &#8203;-em seu lugar.

Respondeu 13/09/2018 em 10:21
fonte usuário

votos
0

Espero que isso pode ajudar

usar <br>(break) tag onde você quer quebrar a linha.

Respondeu 31/08/2017 em 10:53
fonte usuário

votos
0

Em vez de -você pode usar &hyphen;ou \u2010.

Além disso, certifique-se a hífens propriedade css foi não definida para nenhum (O valor padrão é Manual ).

<wbr>não é suportado pelo Internet Explorer .

Respondeu 14/05/2015 em 04:29
fonte usuário

votos
0

O hífen não quebra funciona bem.

Entidade HTML (decimal)

&#8209;
Respondeu 21/03/2014 em 23:09
fonte usuário

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more