Hífen suave em HTML (<wbr> vs. & shy;)

154

Como você resolve o problema com hífens suaves em suas páginas da web? Em um texto, pode haver palavras longas que você pode querer quebra de linha com um hífen. Mas você não deseja que o hífen seja exibido se a palavra inteira estiver na mesma linha.

De acordo com os comentários nesta página, <wbr> há uma "sopa de tags inventada pela Netscape" não padrão. Parece que também &shy; tem seus problemas com a conformidade padrão . Parece não haver maneira de obter uma solução funcional para todos os navegadores .

Qual é o seu caminho para lidar com hífens suaves e por que você o escolheu? Existe uma solução preferida ou uma prática recomendada?


Consulte a discussão SO relacionada aqui .

Pontus
fonte
Desculpe por fechar mais cedo - este está próximo, mas não é o mesmo que o outro. Indo embora embora do link.
Chris Marasti-Georg
2
Observe que <wbr>não é para ser um hífen.
Andreas Rejbrand
Para testar navegadores: jsfiddle.net/k2hbrjz8/2 Ou & # 173; ou & tímido; parece funcionar como desejado para exibição e copiar / colar. <wbr> somente seleciona metade da palavra quando clica duas vezes. A pesquisa encontra tudo no Firefox atual (a partir desta data do comentário). Se & # 173; índices melhores, use-o.
precisa saber é o seguinte

Respostas:

132

Infelizmente, &shyo suporte é tão inconsistente entre os navegadores que ele realmente não pode ser usado.

O QuirksMode está certo - não há uma boa maneira de usar hífens suaves em HTML no momento. Veja o que você pode fazer para ficar sem eles.

Edição de 2013: De acordo com o QuirksMode , &shy;agora funciona / é suportado em todos os principais navegadores.

Marco
fonte
11
Infelizmente isso não acontece. Tente procurar uma palavra que contenha um hífen suave no seu navegador. A maioria dos navegadores o trata como duas palavras separadas, em vez de simplesmente ignorar o hífen suave.
Gclj5 18/10/09
3
@ gclj5 Acabei de testar o find em uma &shy;palavra no Chrome v21, e ele ignora corretamente o hífen suave. Não tenho certeza sobre o IE, FF e outros navegadores.
evanrmurphy
6
Funciona bem (ou seja, as palavras são pesquisáveis) no FF, Chrome e Safari recentes.
MMM
10
Mas copie o texto com o & shy; no Chrome, retorne texto com traço. Exemplo: "uni & tímido; mais tarde & tímido; al." copiado como "uni-later-al".
Enyby
2
Hoje tivemos a cair &shy;de uso devido a erros específicos em Webkit (que afectam Safari, Safari iOS e Chrome versões mais recentes), causando caracteres estranhos renderização com um número significativo de fontes personalizadas (ambos gratuitos e comerciais)
Nico Pernice
58

Resumo de fevereiro de 2015 (parcialmente atualizado em novembro de 2017)

Todos eles têm um bom desempenho, &#173;mas o Google ainda pode indexar as palavras que o contêm.

  • Nos navegadores: &shy; e os &#173;dois são exibidos conforme o esperado nos principais navegadores (mesmo no IE antigo!). <wbr>não é suportado nas versões recentes do IE (10 ou 11) e não funciona corretamente no Edge.
  • Quando copiados e colados a partir de navegadores: (testado em 2015) conforme o esperado &shy;e&#173; para Chrome e Firefox no Mac, no Windows (10), mantém os caracteres e cola hífens fortes no Bloco de Notas e hífens invisíveis nos aplicativos que os suportam. O IE (win7) sempre cola com hífens, mesmo no IE10, e o Safari (Mac) copia de uma maneira que cola como hífens em alguns aplicativos (por exemplo, MS Word), mas não em outros
  • Localizar na página funciona para&shy; e &#173;em todos os navegadores, exceto o IE, que corresponde apenas às correspondências exatas copiadas e coladas (até o IE11)
  • Mecanismos de busca: o Google faz a correspondência de palavras que contenham &#173;com palavras digitadas normalmente. A partir de 2017, parece não corresponder mais às palavras que contêm &shy;. Appers Yandex para ser o mesmo. Bing e Baidu parecem não corresponder.

Teste-o

Para testes ao vivo atualizados, aqui estão alguns exemplos de palavras exclusivas com hífens suaves.

  • &shy;- confumbabbl&shy;ication&shy;ism- confumbabblicationism
    • .................................................. .................................................. .......... confumbabblicationism
    • .................................................. .................................................. .............. confumbabblicationism

<wbr>- donfounbabbl<wbr>ication<wbr>ism. Este site é removido <wbr/>da saída. Aqui está um trecho de jsbin.com para teste .

  • &#173;- eonfulbabbl&#173;ication&#173;ism- eonfulbabblicationism
    • .................................................. .................................................. ............. eonfulbabblicationism
    • .................................................. .................................................. ................ eonfulbabblicationism

Aqui eles estão sem hífens tímidos (isto é para copiar e colar nos testes de localização na página; escritos de uma maneira que não interrompa os testes do mecanismo de pesquisa):

ZZZconfumbabblicationismZZZdonfounbabblicationismZZZeonfulbabblicationismZZZ

Exibir nos navegadores

Êxito: exibido como uma palavra normal, exceto onde deve quebrar, quando quebra e hifeniza no local especificado.

Falha: exibição incomum ou falha no local pretendido.

  • Chrome (40.0.2214.115, Mac): &shy;sucesso, <wbr>sucesso, &#173;sucesso
  • Firefox (35.0.1, Mac): &shy;sucesso, <wbr>sucesso, &#173;sucesso
  • Safari (6.1.2, Mac): &shy;sucesso, <wbr> ainda não testado ,&#173; sucesso
  • Edge (Windows 10): &shy;sucesso, <wbr> falha (interrupção, mas sem hífen), &#173;sucesso
  • IE11 (Windows 10): &shy;sucesso, <wbr> falha (sem interrupção), &#173;sucesso
  • IE10 (Windows 10): &shy;sucesso, <wbr> falha (sem interrupção), &#173;sucesso
  • IE8 (Windows 7): irregular - às vezes, nenhum deles funciona e todos seguem apenas css word-wrap. Às vezes, eles parecem funcionar. Ainda não foi encontrado nenhum padrão claro sobre o porquê.
  • IE7 (Windows 7): &shy;sucesso, <wbr>sucesso, &#173;sucesso

Copiar e colar nos navegadores

Sucesso: copiar e colar a palavra inteira, sem hífen. (testado no Mac, colando na pesquisa do navegador, MS Word 2011 e Sublime Text)

Falha: colando com um hífen, espaço, quebra de linha ou com caracteres indesejados.

  • Chrome (40.0.2214.115, Mac): &shy;sucesso, <wbr>sucesso, &#173;sucesso
  • Firefox (35.0.1, Mac): &shy;sucesso, <wbr>sucesso,&#173;sucesso
  • Safari (6.1.2, Mac): &shy; falha no MS Word (cola tudo como hífen), o sucesso em outros aplicativos <wbr> falha , &#173; falha no MS Word (cola tudo como hífen), sucesso em outros aplicativos
  • IE10 (Win7): &shy; falha cola todos como hífens, <wbr> falha , &#173; falha colar tudo como hífen
  • IE8 (Win7): &shy; falha cola todos como hífens, <wbr> falha , &#173; falha colar tudo como hífen
  • IE7 (Win7): &shy; falhar cola tudo como hífen, <wbr> falhar , &#173; falha colar tudo como hífen

Correspondência de mecanismo de pesquisa

Atualizado em novembro de 2017. <wbr>não testado porque o CMS do StackOverflow o retirou.

Êxito: pesquisas em geral, a palavra não hifenizada encontra esta página.

Falha: os motores de busca encontram esta página apenas nas pesquisas dos segmentos quebrados das palavras ou de uma palavra com hífens.

  • Google: &shy;falha, &#173;consegue
  • Bing: &shy;falha, &#173;falha
  • Baidu: &shy;falha, &#173;falha (pode corresponder fragmentos em cadeias mais longas, mas não as palavras que contêm um &#173;ou &shy;)
  • Yandex: &shy;falha, &#173;é bem-sucedido (embora seja possível que ele corresponda a um fragmento de sequência como o Baidu, não tenho 100% de certeza)

Localizar na página nos navegadores

Sucesso e falha como correspondência de mecanismo de pesquisa.

  • Chrome (40.0.2214.115, Mac): &shy;sucesso, <wbr>sucesso, &#173;sucesso
  • Firefox (35.0.1, Mac): &shy;sucesso, <wbr>sucesso, &#173;sucesso
  • Safari (6.1.2, Mac): &shy;sucesso, <wbr>sucesso, &#173;sucesso
  • IE10 (Win7): &shy; falha apenas corresponde quando ambos contêm hífens tímidos, <wbr>sucesso, &#173; falha apenas corresponde quando ambos contêm hífens tímidos
  • IE8 (Win7): &shy; falha apenas corresponde quando ambos contêm hífens tímidos, <wbr>sucesso, &#173; falha apenas corresponde quando ambos contêm hífens tímidos
  • IE7 (Win7): &shy; falha apenas corresponde quando ambos contêm hífens tímidos, <wbr>sucesso, &#173; falha apenas corresponde quando ambos contêm hífens tímidos
user56reinstatemonica8
fonte
Hoje, <wbr/>trabalha no Firefox e Chrome. (E, para ser honesto, eu suspeito que ele fez mesmo em fevereiro, pelo menos no Windows.)
Andreas Rejbrand
1
Estou usando as versões mais recentes do Chrome e Firefox no Windows 7 e <wbr/>funciona em ambas. Observe que o <wbr>elemento não deve adicionar um hífen quando ocorrer uma interrupção. Em outras palavras, <wbr/>e &shy; são não deveria fazer a mesma coisa .
precisa saber é o seguinte
Ah, olhando para ele, parece que o CMS da SE removeu os <wbr/>s da marcação final, mantendo-os no código-fonte. Maldito seja, SE! Will edit ..
user56reinstatemonica8
Estranho, não é possível reproduzir esse 'bug'.
Andreas Rejbrand
Existe algum ponto em testar &shy;e &#173;? Quando atingem o DOM, são literalmente os mesmos ; somente no tokenizer HTML eles são totalmente diferentes.
gsnedders
32

Há um esforço contínuo para padronizar a hifenização no CSS3 .

Alguns navegadores modernos, principalmente o Safari e o Firefox, já suportam isso. Aqui está uma referência boa e atualizada sobre o suporte ao navegador .

Uma vez que a hifenização do CSS seja implementada universalmente, essa seria a melhor solução. Enquanto isso, posso recomendar o Hyphenator - um script JS que descobre como hifenizar seu texto da maneira mais apropriada para um navegador específico.

Hifenizador:

  • confia no algoritmo de hifenização de Franklin M. Liangs , comumente conhecido pelo LaTeX e OpenOffice.
  • usa hifenização CSS3 onde está disponível,
  • insere automaticamente &shy;na maioria dos outros navegadores,
  • suporta múltiplos idiomas,
  • é altamente configurável,
  • graciosamente recua caso o javascript não esteja ativado.

Eu usei e funciona muito bem!

Dominik
fonte
Firefox suporta a propriedade, mas não faz nada quando aplicado
bob0the0mighty
Eu estava errado, o Firefox funciona, mas você precisa incluir um tipo de idioma na sua tag html.
bob0the0mighty
O script Hyphenator parece não ser mais mantido, mas há uma nova versão do mesmo autor disponível aqui: github.com/mnater/Hyphenopoly
MattFisch
20

Eu uso &shy;, inserido manualmente, quando necessário.

Eu sempre acho uma pena que as pessoas não usem técnicas porque existe algum navegador, talvez velho ou estranho, que não lida com elas da maneira como foram especificadas. Descobri que &shy;está funcionando corretamente nos navegadores Internet Explorer e Firefox recentes, isso deve ser suficiente. Você pode incluir uma verificação no navegador informando às pessoas para usarem algo adulto ou continuarem por seu próprio risco se encontrarem algum navegador estranho.

A silabificação não é tão fácil e não recomendo deixá-lo para algum Javascript . É um tópico específico do idioma e pode precisar ser cuidadosamente revisado pelo funcionário da recepção, se você não quiser que seu texto seja irritante. Alguns idiomas, como o alemão, formam palavras compostas e provavelmente levam a problemas de decomposição. Por exemplo Spargelder( germ. Economizou dinheiro, pl.) Pode, por regras de silabificação, ser embrulhado em dois lugares ( Spar-gel-der). No entanto, envolvê-lo na segunda posição, faz com que a primeira parte apareça como Spargel-( germe. Aspargo), ativando um conceito completamente enganador na cabeça do leitor e, portanto, deve ser evitado.

E o que dizer da corda Wachstube? Pode significar 'sala de guarda' ( Wach-stu-be) ou 'tubo de cera' ( Wachs-tu-be). Provavelmente você também pode encontrar outros exemplos em outros idiomas. Você deve fornecer um ambiente no qual o recepcionista possa ser apoiado na criação de um texto bem silabificado, revisando todas as palavras críticas.

Matthias Ronge
fonte
6
O exemplo comum em inglês de Spar-gelder vs. Spargel-der é "re-cord" vs "rec-ord" (homógrafos, mas não homofones). O primeiro é um verbo, o último é um substantivo. Os algoritmos geralmente não são inteligentes o suficiente para isso, mesmo em inglês (um dos idiomas com melhor suporte em TI).
Nicholas Shanks
38
Eu sugeriria troca de especialistas vs troca de especialistas
CJ Dennis
13

É muito importante notar que, a partir do HTML5, <wbr>e&shy; não é suposto fazer a mesma coisa !

Hífens suaves

&shy;é um hífen suave, ou seja, U + 00AD: SOFT HYPHEN. Por exemplo,

innehålls&shy;förteckning

pode ser renderizado como

innehållsförteckning

ou como

innehålls-
förteckning

Atualmente, hífens suaves funcionam no Firefox, Chrome e Internet Explorer.

O wbrelemento

O wbrelemento é uma oportunidade de quebra de palavras, que não exibirá um hífen se ocorrer uma quebra de linha. Por exemplo,

ABCDEFG<wbr/>abcdefg

pode ser renderizado como

ABCDEFGabcdefg

ou como

ABCDEFG
abcdefg

Atualmente, esse elemento funciona no Firefox e Chrome.

Andreas Rejbrand
fonte
4

A entidade de espaço com largura zero pode ser usada no lugar da <wbr>tag de maneira confiável em praticamente todas as plataformas.

&#8203;

Também é útil a palavra entidade marcenaria , que pode ser usada para proibir uma interrupção. (Insira entre cada caractere de uma palavra, exceto onde você deseja a quebra.)

&#8288;

Com os dois, você pode fazer qualquer coisa.

AVL geek
fonte
1
Um espaço de largura zero (ZWSP, U + 200B &#8203;) é exatamente o que <wbr>fez (iirc; já faz um tempo), mas é melhor suportado (universalmente hoje em dia). É exatamente o que eu estava procurando, pois não adiciona um hífen às palavras quebradas, permitindo, por exemplo, que os valores separados por vírgula sejam quebrados quando executados através de uma s/,/,\&#8203;/gsubstituição.
11118 Adam
2

Esta é uma solução crossbrowser que eu estava procurando há pouco tempo, que roda no cliente e usa o jQuery:

(function($) { 
  $.fn.breakWords = function() { 
    this.each(function() { 
      if(this.nodeType !== 1) { return; } 

      if(this.currentStyle && typeof this.currentStyle.wordBreak === 'string') { 
        //Lazy Function Definition Pattern, Peter's Blog 
        //From http://peter.michaux.ca/article/3556 
        this.runtimeStyle.wordBreak = 'break-all'; 
      } 
      else if(document.createTreeWalker) { 

        //Faster Trim in Javascript, Flagrant Badassery 
        //http://blog.stevenlevithan.com/archives/faster-trim-javascript 

        var trim = function(str) { 
          str = str.replace(/^\s\s*/, ''); 
          var ws = /\s/, 
          i = str.length; 
          while (ws.test(str.charAt(--i))); 
          return str.slice(0, i + 1); 
        }; 

        //Lazy Function Definition Pattern, Peter's Blog 
        //From http://peter.michaux.ca/article/3556 

        //For Opera, Safari, and Firefox 
        var dWalker = document.createTreeWalker(this, NodeFilter.SHOW_TEXT, null, false); 
        var node,s,c = String.fromCharCode('8203'); 
        while (dWalker.nextNode()) { 
          node = dWalker.currentNode; 
          //we need to trim String otherwise Firefox will display 
          //incorect text-indent with space characters 
          s = trim( node.nodeValue ).split('').join(c); 
          node.nodeValue = s; 
        } 
      } 
    }); 

    return this; 
  }; 
})(jQuery); 
anthonyv
fonte
2

Sugiro usar wbr, para que o código possa ser escrito assim:

<p>这里有一段很长,很长的<wbr
></wbr>文字;这里有一段</p>

Ele não conduzirá espaço entre caracteres, enquanto &shy;não interromperá os espaços criados por quebras de linha.

Weijing Jay Lin
fonte
2

Usei com êxito o caractere hífen unicode suave em alguns navegadores de desktop e dispositivos móveis para resolver o problema.

O símbolo unicode é \u00ADe é muito fácil de inserir na string unicode do Python s = u'Языки и методы програм\u00ADми\u00ADро\u00ADва\u00ADния'.

Outra solução é inserir o próprio caractere unicode, e a string de origem parecerá perfeitamente comum em editores como Sublime Text, Kate, Geany, etc (o cursor sentirá o símbolo invisível).

Editores hexadecimais de ferramentas internas podem automatizar essa tarefa facilmente.

Um argumento fácil é usar caracteres raros e visíveis, como ¦, fáceis de copiar e colar, e substituí-los no hífen suave usando, por exemplo, script de front-end no $(document).ready(...). O código fonte como s = u'Языки и методы про¦гра¦м¦ми¦ро¦ва¦ния'.replace('¦', u'\u00AD')é mais fácil de ler do que s = u'Языки и методы про\u00ADг\u00ADра\u00ADм\u00ADми\u00ADро\u00ADва\u00ADния'.

dmitry_romanov
fonte
0

Às vezes, os navegadores da Web parecem mais tolerantes se você usar a cadeia Unicode &#173;em vez da &shy;entidade.

Tommy Kronkvist
fonte
0

Se você tiver azar e ainda precisar usar o JSF 1, a única solução é usar o & # 173 ;, & shy; não funciona.

Jaap D
fonte
0

<wbr> e & tímido;

Hoje você pode usar os dois.

<wbr> use para quebrar e não coloque mais informações.

Exemplo, use para mostrar links:

 https://stackoverflow.com/questions/226464/soft-hyphen-in-html-wbr-vs-shy

&tímido; quando necessário, neste momento o texto será interrompido e adicionará um hífen.

Exemplo:

"É imprescindível; posi; tímido; vel pa & tímido; ra um ho & tímido; mem a & tímido; pren & tímido; der a & tímido; qui & tímido; lo que ele acha que já está & tímido; estar."

div{
  max-width: 130px;
  border-width: 2px;
  border-style: dashed;
  border-color: #f00;
  padding: 10px;
}
<div>https://<wbr>stackoverflow.com<wbr>/questions/226464<wbr>/soft-hyphen-in-<wbr>html-wbr-vs-shy</div>

<div>É im&shy;pos&shy;sí&shy;vel pa&shy;ra um ho&shy;mem a&shy;pren&shy;der a&shy;qui&shy;lo que ele acha que já sa&shy;be.</div>

Roberto Góes
fonte