¿Cómo resuelve el problema con guiones suaves en sus páginas web? En un texto puede haber palabras largas que tal vez desee separar con un guión. Pero no desea que se muestre el guión si toda la palabra está en la misma línea.

Según los comentarios de esta página, se <wbr> trata de una "sopa de etiqueta inventada por Netscape". Parece que también ­ tiene sus problemas con el cumplimiento estándar . Parece que no hay forma de obtener una solución que funcione para todos los navegadores .

¿Cuál es su forma de manejar guiones suaves y por qué lo eligió? ¿Existe una solución preferida o una mejor práctica?

Desafortunadamente, &shyel soporte es tan inconsistente entre los navegadores que realmente no se puede usar.

QuirksMode tiene razón: no hay una buena manera de utilizar guiones suaves en HTML en este momento. Vea lo que puede hacer para ir sin ellos.

Edición 2013: según QuirksMode , ­ahora funciona / es compatible con todos los principales navegadores.

Resumen de febrero de 2015 (parcialmente actualizado en noviembre de 2017)

Todos funcionan bastante bien, lo ­supera ya que Google todavía puede indexar las palabras que lo contienen.

• En los navegadores: ­ y ­ambos se muestran como se esperaba en los principales navegadores (¡incluso en el antiguo IE!). <wbr>no es compatible con versiones recientes de IE (10 u 11) y no funciona correctamente en Edge.
• Cuando se copia y pega desde los navegadores: (probado en 2015) como se esperaba para ­y ­para Chrome y Firefox en Mac, en Windows (10), mantiene los caracteres y pega guiones en el Bloc de notas y guiones invisibles en las aplicaciones que los admiten. IE (win7) siempre se pega con guiones, incluso en IE10, y las copias de Safari (Mac) se pegan como guiones en algunas aplicaciones (por ejemplo, MS Word), pero no en otras
• Buscar en la página funciona para ­y ­en todos los navegadores, excepto IE, que solo coincide con coincidencias exactas copiadas y pegadas (incluso hasta IE11)
• Motores de búsqueda: Google hace coincidir palabras que contienen ­con palabras escritas normalmente. A partir de 2017, parece que ya no coincide con las palabras que contienen ­. Yandex parece ser lo mismo. Bing y Baidu parecen no coincidir tampoco.

Pruébalo

Para una prueba en vivo actualizada, aquí hay algunos ejemplos de palabras únicas con guiones suaves.

• ­- confumbabbl­ication­ism- confumbabblicationism
  • .................................................. .................................................. .......... confumbabblicationism
  • .................................................. .................................................. .............. confumbabblicationism

<wbr>- donfounbabbl<wbr>ication<wbr>ism. Este sitio elimina <wbr/>de la salida. Aquí hay un fragmento de jsbin.com para probar .

• ­- eonfulbabbl­ication­ism- ebafulbabblicationism
  • .................................................. .................................................. ............. eonfulbabblicationism
  • .................................................. .................................................. ................ eonfulbabblicationism

Aquí están sin guiones tímidos (esto es para copiar y pegar en las pruebas de búsqueda en la página; escrito de manera que no rompa las pruebas del motor de búsqueda):

ZZZconfumbabblicationismZZZdonfounbabblicationismZZZeonfulbabblicationismZZZ

Mostrar en todos los navegadores

Éxito: se muestra como una palabra normal, excepto donde debe romperse, cuando se rompe y se divide en guiones en el lugar especificado.

Falla: se muestra de forma inusual o no se rompe en el lugar previsto.

• Chrome (40.0.2214.115, Mac): ­éxito, <wbr>éxito, ­éxito
• Firefox (35.0.1, Mac): ­éxito, <wbr>éxito, ­éxito
• Safari (6.1.2, Mac): ­éxito, <wbr> aún no probado , ­éxito
• Edge (Windows 10): ­éxito, <wbr> falla (salto pero sin guión), ­éxito
• IE11 (Windows 10): ­éxito, <wbr> falla (sin interrupción), ­éxito
• IE10 (Windows 10): ­éxito, <wbr> falla (sin interrupción), ­éxito
• IE8 (Windows 7): errático: a veces, ninguno de ellos funciona en absoluto y todos simplemente siguen css word-wrap. A veces, todos parecen funcionar. Todavía no se ha encontrado ningún patrón claro de por qué.
• IE7 (Windows 7): ­éxito, <wbr>éxito, ­éxito

Copiar y pegar en los navegadores

Éxito: copiar y pegar toda la palabra, sin guión. (probado en Mac pegando en la búsqueda del navegador, MS Word 2011 y Sublime Text)

Falla: pegar con un guión, espacio, salto de línea o con caracteres basura.

• Chrome (40.0.2214.115, Mac): ­éxito, <wbr>éxito, ­éxito
• Firefox (35.0.1, Mac): ­éxito, <wbr>éxito, ­éxito
• Safari (6.1.2, Mac): ­ falla en MS Word (pega todo como guiones), <wbr> falla en otras aplicaciones , ­ falla en MS Word (pega todo como guiones), éxito en otras aplicaciones
• IE10 (Win7): ­ error pega todo como guiones, <wbr> falla , ­ falla pega todo como guiones
• IE8 (Win7): ­ error pega todo como guiones, <wbr> falla , ­ falla pega todo como guiones
• IE7 (Win7): ­ error pega todo como guiones, <wbr> falla , ­ falla pega todo como guiones

Motor de búsqueda coincidente

Actualizado en noviembre de 2017. <wbr>no probado porque el CMS de StackOverflow lo eliminó.

Éxito: las búsquedas en toda la palabra sin guión encuentran esta página.

Fallo: los motores de búsqueda solo encuentran esta página en las búsquedas de los segmentos rotos de las palabras, o una palabra con guiones.

• Google: ­falla, ­tiene éxito
• Bing: ­falla, ­falla
• Baidu: ­falla, ­falla (puede hacer coincidir fragmentos dentro de cadenas más largas pero no las palabras que contienen un ­o ­)
• Yandex: ­falla, ­tiene éxito (aunque es posible que coincida con un fragmento de cadena como Baidu, no está 100% seguro)

Buscar en la página en todos los navegadores

Éxito y fracaso como motor de búsqueda.

• Chrome (40.0.2214.115, Mac): ­éxito, <wbr>éxito, ­éxito
• Firefox (35.0.1, Mac): ­éxito, <wbr>éxito, ­éxito
• Safari (6.1.2, Mac): ­éxito, <wbr>éxito, ­éxito
• IE10 (Win7): ­ falla solo coincide cuando ambos contienen guiones tímidos, <wbr>éxito, ­ falla solo coincide cuando ambos contienen guiones tímidos
• IE8 (Win7): ­ falla solo coincide cuando ambos contienen guiones tímidos, <wbr>éxito, ­ falla solo coincide cuando ambos contienen guiones tímidos
• IE7 (Win7): ­ falla solo coincide cuando ambos contienen guiones tímidos, <wbr>éxito, ­ falla solo coincide cuando ambos contienen guiones tímidos

Hay un esfuerzo continuo para estandarizar la separación silábica en CSS3 .

Algunos navegadores modernos, especialmente Safari y Firefox, ya lo admiten. Aquí hay una referencia buena y actualizada sobre el soporte del navegador .

Una vez que la separación silábica CSS se implemente universalmente, esa sería la mejor solución. Mientras tanto, puedo recomendar Hyphenator , un script JS que descubre cómo separar el texto de la manera más adecuada para un navegador en particular.

Guión:

• se basa en el algoritmo de separación de sílabas Franklin M. Liangs , comúnmente conocido por LaTeX y OpenOffice.
• usa la separación silábica CSS3 donde está disponible,
• se inserta automáticamente ­en la mayoría de los otros navegadores,
• admite múltiples idiomas,
• es altamente configurable
• graciosamente retrocede en caso de que javascript no esté habilitado.

¡Lo he usado y funciona muy bien!

Yo uso ­, insertado manualmente donde sea necesario.

Siempre me parece una pena que las personas no usen técnicas porque hay algún navegador, tal vez viejo o extraño, que no los maneja de la manera en que se especificaron. Descubrí que ­funciona correctamente en los navegadores recientes de Internet Explorer y Firefox, eso debería ser suficiente. Puede incluir un cheque en el navegador que le indique a las personas que usen algo maduro o que continúen bajo su propio riesgo si encuentran algún navegador extraño.

La Syllabification no es tan fácil y no puedo recomendar dejarlo en Javascript . Es un tema específico del idioma y es posible que deba revisarlo cuidadosamente el técnico de escritorio si no desea que su texto sea irritante. Algunos idiomas, como el alemán, forman palabras compuestas y pueden provocar problemas de descomposición. Por ejemplo, Spargelder( germen. Dinero ahorrado, pl.) Puede, por reglas de sílabas, estar envuelto en dos lugares ( Spar-gel-der). Sin embargo, al envolverlo en la segunda posición, la primera parte aparece como Spargel-( germen. Espárragos), activando un concepto completamente engañoso en la cabeza del lector y, por lo tanto, debe evitarse.

¿Y qué hay de la cuerda Wachstube? Podría significar 'sala de guardia' ( Wach-stu-be) o 'tubo de cera' ( Wachs-tu-be). Probablemente también encuentre otros ejemplos en otros idiomas. Debe intentar proporcionar un entorno en el que se pueda ayudar al personal de escritorio a crear un texto bien syllabified, que corrija cada palabra crítica.

Es muy importante tener en cuenta que a partir de HTML5, <wbr>y ­ no se supone que debe hacer lo mismo !

Guiones suaves

­es un guión suave, es decir, U + 00AD: SOFT HYPHEN. Por ejemplo,

innehålls­förteckning

podría representarse como

innehållsförteckning

o como

innehålls-
förteckning

A partir de hoy, los guiones suaves funcionan en Firefox, Chrome e Internet Explorer.

El wbrelemento

El wbrelemento es una oportunidad de salto de palabra, que no mostrará un guión si se produce un salto de línea. Por ejemplo,

ABCDEFG<wbr/>abcdefg

podría representarse como

ABCDEFGabcdefg

o como

ABCDEFG
abcdefg

A partir de hoy, este elemento funciona en Firefox y Chrome.

La entidad de espacio de ancho cero se puede usar en lugar de <wbr>etiqueta de manera confiable en prácticamente todas las plataformas.

​

También es útil la palabra entidad de unión , que puede usarse para prohibir un descanso. (Inserte entre cada carácter de una palabra, excepto donde desee el salto).

⁠

Con los dos de estos, puedes hacer cualquier cosa.

Esta es una solución crossbrowser que estaba viendo hace un momento que se ejecuta en el cliente y usa 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); 

Sugiero usar wbr, para que el código se pueda escribir así:

<p>这里有一段很长，很长的<wbr
></wbr>文字；这里有一段</p>

No liderará el espacio entre los personajes, mientras ­que no detendrá los espacios creados por los saltos de línea.

Utilicé el carácter unicode de guión suave con éxito en algunos navegadores de escritorio y móviles para resolver el problema.

El símbolo Unicode es \u00ADy es bastante fácil de insertar en una cadena Python Unicode como s = u'Языки и методы програм\u00ADми\u00ADро\u00ADва\u00ADния'.

Otra solución es insertar el propio carácter unicode, y la cadena de origen se verá perfectamente normal en editores como Sublime Text, Kate, Geany, etc. (el cursor sentirá el símbolo invisible).

Los editores hexadecimales de herramientas internas pueden automatizar esta tarea fácilmente.

Un kludge fácil es usar caracteres raros y visibles, como ¦, que es fácil de copiar y pegar, y reemplazarlo con guiones suaves usando, por ejemplo, un script frontend $(document).ready(...). El código fuente como s = u'Языки и методы про¦гра¦м¦ми¦ро¦ва¦ния'.replace('¦', u'\u00AD')es más fácil de leer que s = u'Языки и методы про\u00ADг\u00ADра\u00ADм\u00ADми\u00ADро\u00ADва\u00ADния'.

A veces, los navegadores web parecen ser más indulgentes si usa la cadena Unicode en ­lugar de la ­entidad.

Si tiene mala suerte y todavía tiene que usar JSF 1, entonces la única solución es usar & # 173 ;, & shy; No funciona.

<wbr> y & shy;

Hoy puedes usar ambos.

<wbr> usar para romper y no poner más información.

Ejemplo, use para mostrar enlaces:

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

&tímido; cuando sea necesario, en este punto el texto se romperá y agregará un guión.

Ejemplo:

"É 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{
  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>