2011-03-18 12 views
16

¿Alguien ha sido capaz de implementar con éxito la separación de sílabas en cualquiera de los navegadores WebKit? Probé el estilo CSS3 hyphenation y -webkit-hyphens: auto. No hay dados para ninguno de esos. ¿O tal vez estoy haciendo algo mal?WebKit Hyphenation

Nota: Solo he probado Safari y Chrome en una Mac.

Actualización: ejemplo Código

<html> 
    <head> 
    <style> 
     div { 
     -webkit-hyphens: auto; 
     } 
    </style> 
    </head> 
    <body> 
    <div style="width: 150px; border: solid 1px black;"> 
     <p>Anaideia, spirit of ruthlessness, shamelessness, and unforgivingness</p> 
     <p>Supercalifragilisticexpialidocious, Antidisestablishmentarianism, Floccinaucinihilipilification, Hippopotomonstrosesquipedaliophobia</p> 
    </div> 
    </body> 
</html> 
+0

¿Dónde está tratando de implementarlas? ¿Puede darnos el texto que está utilizando, por ejemplo? –

+0

Aquí hay un enlace a ese código (con webkit escrito correctamente :)) http://jsbin.com/ihama4/2/ –

+0

¿Cómo se te ocurrieron esas palabras largas? Solo he escuchado el primero antes. Supercalifragilisticexpialidocious –

Respuesta

25

webkit-guiones funciona bien en iOS 4.2 y superiores, y se apoya parcialmente en los nocturnos de WebKit.

Webkit:

Webkit

IOS 4.3:

iOS 4.3

+2

+1 para capturas de pantalla explicativas –

+1

No lo uses en absoluto a partir de 2015: http://caniuse.com/#feat=css-hyphens –

+0

¿Por qué? , tanto Safari 9 en el escritorio como en iOS 9 todavía usan el prefijo -webkit-, otros navegadores tampoco están prefijados. –

12

Funciona en Safari (probado con Safari 5.1 en OS X Lion, y Safari móvil en el iPad), no con Chrome todavía. Consulte http://caniuse.com/css-hyphens para obtener compatibilidad con el navegador de guiones.

Así es como los párrafos se labran en el proyecto 320 y hacia arriba (http://www.stuffandnonsense.co.uk/projects/320andup/):

p { 
    hyphens:auto; 
    text-align:justify; 
    -webkit-hyphens:auto; 
    -webkit-hyphenate-character:"\2010"; 
    -webkit-hyphenate-limit-after:1; 
    -webkit-hyphenate-limit-before:3; 
    -moz-hyphens:auto; 
} 

(última línea es para Firefox)

texto de manera justificada en los navegadores que era un gran no-no se está convirtiendo lentamente en una realidad.

3

Mejores días están por venir .. Después de navegar por el Editors working draft - En la instancia provista, creo que la mejor propiedad en el futuro sería 'overflow-wrap:'. 'guiones' es realmente más adecuado para los requisitos generales de formato, mientras que el desbordamiento es para casos de emergencia de palabras excesivamente largas que requieren interrupción. El mejor valor sería

* { 
overflow-wrap:hyphenate. 
} 

Alas doesen't desbordamiento de envoltura parecen estar apoyado en modo alguno por el momento en el iPhone o Firefox, y el desbordamiento-wrap: la separación silábica no es ni siquiera en el borrador de trabajo. (área gris)