w3schools shy hyphens example css webkit hyphenation

shy - hyphens css w3schools



WebKit Hyphenation (3)

-webkit-hyphens funciona bien en iOS 4.2 y superior, y es parcialmente compatible con los juegos nocturnos de webkit.

Webkit:

iOS 4.3:

¿Alguien ha podido implementar con éxito la separación de guiones en alguno de los navegadores WebKit? He probado el estilo de hyphenation CSS3, así como -webkit-hyphens: auto . No hay dados para ninguno de esos. O tal vez estoy haciendo algo mal?

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

Actualización: ejemplo de 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>


Funciona en Safari (probado con Safari 5.1 en OS X Lion y Safari mobile en iPad), aún no con Chrome. Consulte http://caniuse.com/css-hyphens para obtener información sobre la compatibilidad con el navegador de guiones.

Aquí se muestra cómo se diseñan los párrafos en el proyecto 320 y versiones posteriores ( 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; }

(la última línea es para Firefox)

El texto tan justificado en los navegadores, que era un gran no-no, se está convirtiendo lentamente en una realidad.


Se avecinan días mejores ... Después de examinar el borrador de trabajo de los editores : en la instancia proporcionada, creo que la mejor propiedad en el futuro sería ''overflow-wrap:''. ''hyphens:'' es realmente más adecuado para los requisitos generales de formato, mientras que el overflow-wrap es para los casos de emergencia de palabras demasiado largas que requieren ruptura. El mejor valor sería

* { overflow-wrap:hyphenate. }

El envoltorio de desbordamiento de Alas no parece ser compatible de ninguna manera todavía en el iPhone o Firefox, y el envoltorio de desbordamiento: el guión no está ni siquiera en el borrador de trabajo. (cara triste)