Como quebrar palavras em um travessão?

Question

Dado um CSS relativamente simples:

div {
  width: 150px;
}

<div>
  12333-2333-233-23339392-332332323
</div>

Como faço para que a string permaneça restrita ao width de 150, e simplesmente passa para uma nova linha no hífen?

Answer 1

Substitua seus hífens por isto:

­

É chamado de hífen "suave".

div {
  width: 150px;
}

<div>
  12333&shy;2333&shy;233&shy;23339392&shy;332332323
</div>

Answer 2

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

Para citar esse link:

A oportunidade de quebra de palavras (<wbr>) O elemento HTML representa uma posição dentro do texto onde o navegador pode opcionalmente quebrar uma linha, embora suas regras de quebra de linha não criem uma quebra nesse local.

Veja como isso poderia ser usado no exemplo do OP (ou veja-o em ação em JSFiddle):

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

^*Eu testei no IE9, IE10 e nas versões mais recentes do Chrome, Firefox, Opera e Safari.

div {
  width: 150px;
}

<div>
  12333-<wbr>2333-<wbr>233-<wbr>23339392-<wbr>332332323
</div>

Answer 3

Como parte do CSS3, ainda não é totalmente suportado, mas você pode encontrar informações sobre quebra automática de palavras aqui.Outra opção é o etiqueta wbr, e nenhum dos quais é totalmente suportado.

Answer 4

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

Adicionalmente ­ não funcionará para o seu exemplo, pois também:

• funciona durante a quebra de palavras, mas quando não há quebra de palavras, não exibe nenhum hífen ou

• Trabalhe quando não estiver quebrando as palavras, mas exibe dois hífens ao quebrar as palavras, pois ele adiciona um hífen em um intervalo.

Answer 5

Neste caso específico (onde sua string conterá hífens), eu transformaria o texto para este lado do servidor:

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

Answer 6

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

Em um hífen suave, seu navegador pode quebrar palavras (adicionando um hífen).Em um espaço de largura zero, seu navegador pode quebrar palavras (sem adicionar nada).

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

111111­222222­-333333​444444-​555555

então seu navegador mostrará isto sem quebra de palavra :

1111112222222-33333334444444-5555555

e esta será todas as quebras de palavras possíveis :

111111-
222222-
-333333
444444-
555555

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

Answer 7

Você também pode usar :

word-break:break-all;

ex.

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

saída:

abababababa
ababababbba
abbabbababa
ababb

quebra de palavra é quebrar toda a palavra ou linha, mesmo que não haja espaço na frase que não tenha largura ou altura fornecida.porca para isso você deve fornecer uma largura ou altura.

Answer 8

O hífen inseparável funciona bem.

Entidade HTML (decimal)

‑

Answer 9

Em vez de - você pode usar ‐ ou \u2010.

Além disso, certifique-se de que hífens propriedade css era não definido como nenhum (O valor padrão é manual).

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

Answer 10

Espero que isso possa ajudar

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

Answer 11

Você pode usar espaço de largura 0 após o caractere de hífen:

div {
  width: 150px;
}

<div>
  12333-&#8203;2333-&#8203;233-&#8203;23339392-&#8203;332332323
</div>

se você quiser uma quebra de linha antes do uso do hífen ​- em vez de.