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 ­ 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?

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 , ­agora funciona / é suportado em todos os principais navegadores.

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

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

• Nos navegadores: ­ e os ­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 ­e­ 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­ e ­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 ­com palavras digitadas normalmente. A partir de 2017, parece não corresponder mais às palavras que contêm ­. 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.

• ­- confumbabbl­ication­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 .

• ­- eonfulbabbl­ication­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): ­sucesso, <wbr>sucesso, ­sucesso
• Firefox (35.0.1, Mac): ­sucesso, <wbr>sucesso, ­sucesso
• Safari (6.1.2, Mac): ­sucesso, <wbr> ainda não testado ,­ sucesso
• Edge (Windows 10): ­sucesso, <wbr> falha (interrupção, mas sem hífen), ­sucesso
• IE11 (Windows 10): ­sucesso, <wbr> falha (sem interrupção), ­sucesso
• IE10 (Windows 10): ­sucesso, <wbr> falha (sem interrupção), ­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): ­sucesso, <wbr>sucesso, ­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): ­sucesso, <wbr>sucesso, ­sucesso
• Firefox (35.0.1, Mac): ­sucesso, <wbr>sucesso,­sucesso
• Safari (6.1.2, Mac): ­ falha no MS Word (cola tudo como hífen), o sucesso em outros aplicativos <wbr> falha , ­ falha no MS Word (cola tudo como hífen), sucesso em outros aplicativos
• IE10 (Win7): ­ falha cola todos como hífens, <wbr> falha , ­ falha colar tudo como hífen
• IE8 (Win7): ­ falha cola todos como hífens, <wbr> falha , ­ falha colar tudo como hífen
• IE7 (Win7): ­ falhar cola tudo como hífen, <wbr> falhar , ­ 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: ­falha, ­consegue
• Bing: ­falha, ­falha
• Baidu: ­falha, ­falha (pode corresponder fragmentos em cadeias mais longas, mas não as palavras que contêm um ­ou ­)
• Yandex: ­falha, ­é 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): ­sucesso, <wbr>sucesso, ­sucesso
• Firefox (35.0.1, Mac): ­sucesso, <wbr>sucesso, ­sucesso
• Safari (6.1.2, Mac): ­sucesso, <wbr>sucesso, ­sucesso
• IE10 (Win7): ­ falha apenas corresponde quando ambos contêm hífens tímidos, <wbr>sucesso, ­ falha apenas corresponde quando ambos contêm hífens tímidos
• IE8 (Win7): ­ falha apenas corresponde quando ambos contêm hífens tímidos, <wbr>sucesso, ­ falha apenas corresponde quando ambos contêm hífens tímidos
• IE7 (Win7): ­ falha apenas corresponde quando ambos contêm hífens tímidos, <wbr>sucesso, ­ falha apenas corresponde quando ambos contêm hífens tímidos

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 ­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!

Eu uso ­, 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 ­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.

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

Hífens suaves

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

innehålls­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.

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.

​

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.)

⁠

Com os dois, você pode fazer qualquer coisa.

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

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 ­não interromperá os espaços criados por quebras de linha.

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ния'.

Às vezes, os navegadores da Web parecem mais tolerantes se você usar a cadeia Unicode ­em vez da ­entidade.

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

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