propiedades - que es source en html
Guión suave en HTML(<wbr> vs. & shy;) (11)
¿Cómo resuelves el problema con guiones suaves en tus páginas web? En un texto, puede haber palabras largas que tal vez desee dividir en línea con un guión. Pero no quiere que se muestre el guión si la palabra completa está en la misma línea.
De acuerdo con los comentarios en esta página <wbr> es una sopa de etiquetas no estándar "inventada por Netscape". Parece como ­ tiene sus problemas con el cumplimiento estándar también . Parece que no hay forma de obtener una solución funcional para todos los navegadores .
¿Cuál es tu forma de manejar los guiones suaves y por qué lo elegiste? ¿Hay una solución preferida o una mejor práctica?
Ver la discusión SO relacionada here .Resumen de febrero de 2015 (actualizado parcialmente en noviembre de 2017)
Todos funcionan bastante bien, ­ lo borda, ya que Google aún puede indexar las palabras que lo contienen.
- En navegadores:
­y­ambos se muestran como se espera 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 copian y pegan de los navegadores: (probado 2015) como se esperaba para
­y­para Chrome y Firefox en Mac, en Windows (10), mantiene los caracteres y pega los guiones duros en el Bloc de notas y los guiones suaves invisibles en las aplicaciones que los admiten. IE (win7) siempre pega con guiones, incluso en IE10, y Safari (Mac) copia de forma que se pega como guiones en algunas aplicaciones (p. Ej., MS Word), pero no en otras. - Encontrar en la página funciona para
­y­en todos los navegadores, excepto en IE, que solo coincide con las coincidencias exactas copiadas y pegadas (incluso hasta IE11) - Motores de búsqueda: Google coincide con las palabras que contienen
­con palabras escritas normalmente. A partir de 2017, parece que ya no coincide con las palabras que contienen­. Yandex parece ser el mismo. Bing y Baidu parecen no coincidir tampoco.
Pruébalo
Para las pruebas en vivo actualizadas, estos son 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- eonfulbabblicationism- .................................................. .................................................. ............. eonfulbabblicationism
- .................................................. .................................................. ................ eonfulbabblicationism
Aquí están sin guiones tímidos (esto es para copiar y pegar en pruebas de búsqueda en la página, escritas de una 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 cuando se debe romper, cuando se rompe y se separa con guiones en el lugar especificado.
Fallo: mostrar de forma inusual o no romper en el lugar deseado.
- 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>error (ruptura pero no guión),­éxito - IE11 (Windows 10):
­éxito,<wbr>error (sin interrupción),­éxito - IE10 (Windows 10):
­éxito,<wbr>error (sin interrupción),­éxito - IE8 (Windows 7): errático: a veces, ninguno de ellos funciona en absoluto y todos simplemente siguen el ajuste de
word-wrapCSS. A veces, parece que todos funcionan. Aún no se ha encontrado un patrón claro de por qué. - IE7 (Windows 7):
­éxito,<wbr>éxito,­éxito
Copiar y pegar entre los navegadores
Éxito: copiar y pegar toda la palabra, sin cifrar. (probado en Mac pegando en la búsqueda del navegador, MS Word 2011 y Sublime Text)
Error: pegar con un guión, espacio, salto de línea o con caracteres no deseados.
- Chrome (40.0.2214.115, Mac):
­éxito,<wbr>éxito,­éxito - Firefox (35.0.1, Mac):
­éxito,<wbr>éxito,­éxito - Safari (6.1.2, Mac):
­fallar en MS Word (pega todos como guiones), el éxito en otras aplicaciones<wbr>falla ,­fallar en MS Word (pega todos como guiones), éxito en otras aplicaciones - IE10 (Win7):
­los errores se pegan todos como guiones,<wbr>fallan ,­no se puede pegar todo como guiones - IE8 (Win7):
­los errores se pegan todos como guiones,<wbr>fallan ,­no se puede pegar todo como guiones - IE7 (Win7):
­los errores se pegan todos como guiones,<wbr>fallan ,­no se puede pegar todo como guiones
Búsqueda de motor de búsqueda
Actualizado en noviembre de 2017. <wbr> no probado porque el CMS de lo eliminó.
Éxito: busca en toda la palabra sin guión esta página.
Fallo: los motores de búsqueda solo encuentran esta página en las búsquedas de segmentos rotos de las palabras, o una palabra con guiones.
- Google:
­falla,­tiene éxito - Bing:
­falla,­falla - Baidu:
­falla,­falla (puede hacer coincidir los fragmentos dentro de cadenas más largas, pero no las palabras en sí mismas que contienen un­o­) - Yandex:
­falla,­tiene éxito (aunque es posible que coincida con un fragmento de cadena como Baidu, no 100% seguro)
Buscar en la página en todos los navegadores
Éxito y fracaso como búsqueda de 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):
­solo falla cuando ambos contienen guiones tímidos,<wbr>éxito,­solo falla cuando ambos contienen guiones tímidos - IE8 (Win7):
­solo falla cuando ambos contienen guiones tímidos,<wbr>éxito,­solo falla cuando ambos contienen guiones tímidos - IE7 (Win7):
­solo falla cuando ambos contienen guiones tímidos,<wbr>éxito,­solo falla cuando ambos contienen guiones tímidos
A veces, los navegadores web parecen ser más indulgentes si utiliza la cadena Unicode ­ en lugar de la ­ entidad.
Es muy importante observar que, a partir de HTML5, <wbr> y ­ se supone que no deben hacer lo mismo
Guiones suaves
­ es un guion suave, es decir, U + 00AD: SOFT HYPHEN. Por ejemplo,
innehålls­förteckning
podría ser renderizado 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 elemento wbr
El elemento wbr 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 ser renderizado como
ABCDEFGabcdefg
o como
ABCDEFG
abcdefg
A partir de hoy, este elemento funciona en Firefox y Chrome.
Esta es una solución de navegador cruzado que estaba mirando hace un rato 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);
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 soporte de navegador .
Una vez que la separación silábica de CSS se implemente universalmente, esa sería la mejor solución. Mientras tanto, puedo recomendar Hyphenator , un script JS que descifra cómo unir el texto de la forma más apropiada para un navegador en particular.
Hyphenator:
- se basa en el algoritmo de separación de palabras de Franklin M. Liangs , comúnmente conocido de 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,
- cae con elegancia en caso de que javascript no esté habilitado.
¡Lo he usado y funciona genial!
La entidad espacial de ancho cero se puede usar en lugar de la etiqueta <wbr> forma confiable en prácticamente cualquier plataforma.
​
También es útil la palabra entidad carpintero , que se puede usar para prohibir un descanso. (Insertar entre cada carácter de una palabra, excepto donde quiera el descanso.)
⁠
Con los dos, puedes hacer cualquier cosa.
Si tiene mala suerte y aún tiene que usar JSF 1, entonces la única solución es usar & # 173 ;, y tímido; No funciona.
Sugiero usar wbr , para que el código pueda escribirse así:
<p>这里有一段很长，很长的<wbr
></wbr>文字；这里有一段</p>
No llevará espacio entre los personajes, mientras es ­ no detendrá espacios creados por saltos de línea.
Utilicé el carácter unicode de guiones suaves con éxito en algunos navegadores de escritorio y dispositivos móviles para resolver el problema.
El símbolo Unicode es /u00AD y es bastante fácil de insertar en una cadena de Unicode de Python como s = u''Языки и методы програм/u00ADми/u00ADро/u00ADва/u00ADния'' .
Otra solución es insertar el carácter unicode, y la cadena de origen se verá perfectamente normal en editores como Sublime Text, Kate, Geany, etc. (sin embargo, el cursor sentirá el símbolo invisible).
Los editores hexadecimales de herramientas internas pueden automatizar fácilmente esta tarea.
Un truco fácil es usar caracteres raros y visibles, como ¦ , que es fácil de copiar y pegar, y reemplazarlos con el uso de guiones suaves, por ejemplo, guión frontend en $(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ния'' .
Yo uso ­ , insertado manualmente donde sea necesario.
Siempre me parece una pena que las personas no usen las técnicas porque hay algún navegador, quizás viejo o extraño, que no las maneja de la forma en que se especificaron. Encontré eso ­ funciona correctamente en los navegadores recientes de Internet Explorer y Firefox, eso debería ser suficiente. Puede incluir una verificación del navegador que indique a las personas que utilicen algo maduro o que continúen bajo su propio riesgo si se presentan con algún navegador extraño.
Syllabification no es tan fácil y no puedo recomendar dejarlo en algún Javascript . Es un tema específico del idioma y puede ser necesario que el deskman lo revise cuidadosamente si no desea que el texto se vuelva irritante. Algunos idiomas, como el alemán, forman palabras compuestas y es probable que generen problemas de descomposición. Por ejemplo, Spargelder ( germinal saved money, pl.) Puede, mediante reglas de silabificación, ser envuelto en dos lugares ( Spar-gel-der ). Sin embargo, envolviéndolo en la segunda posición, convierte la primera parte en Spargel- (espárrago germinal ), activando un concepto completamente erróneo en la cabeza del lector y por lo tanto debe evitarse.
¿Y la cadena Wachstube ? Podría significar "sala de guardia" ( Wach-stu-be ) o "tubo de cera" ( Wachs-tu-be ). Probablemente también encuentres otros ejemplos en otros idiomas. Debería tratar de proporcionar un entorno en el que se pueda apoyar al escritor en la creación de un texto bien silábico, verificando cada palabra crítica.
Desafortunadamente, el soporte de ­ es tan inconsistente entre navegadores que realmente no se puede usar.
QuirksMode tiene razón: no hay una buena manera de usar guiones suaves en HTML en este momento. Vea lo que puede hacer para ir sin ellos.
Edición de 2013: según QuirksMode , ­ ahora funciona / es compatible con todos los principales navegadores.