Pour gérer les débordements de contenus, il est (était) recommandé d'utiliser la combinaison de deux déclarations : word-wrap: break-word et hyphens: auto (avec préfixes), la seconde étant moins bien supportée : http://caniuse.com/#search=hyphens
Mais ça c'était avant que word-wrap: break-word devienne systématiquement prioritaire sur hyphens: auto si les deux sont appliqués (quel que soit l’ordre et même avec un !important sur hyphens.
Du coup, la classe appliquée actuellement sur KNACSS est aujourd'hui complètement inutile :
https://github.com/alsacreations/KNACSS/blob/master/sass/library/_misc.scss#L26
@media (max-width: $tiny) {
/* you shall not pass */
div,
textarea,
table,
td,
th,
code,
pre,
samp {
word-wrap: break-word;
hyphens: auto;
}
}
:(
La méthode qui fonctionnerait (bien plus tordue) serait :
div {
word-wrap: break-word;
}
@supports (-webkit-hyphens: auto) or (-ms-hyphens: auto) or (hyphens: auto) {
div {
word-wrap: normal;
-webkit-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
}
}
Test en ligne (CodePen) : http://codepen.io/raphaelgoetter/pen/aBLQeL?editors=1100
Pour gérer les débordements de contenus, il est (était) recommandé d'utiliser la combinaison de deux déclarations :
word-wrap: break-wordethyphens: auto(avec préfixes), la seconde étant moins bien supportée : http://caniuse.com/#search=hyphensMais ça c'était avant que
word-wrap: break-worddevienne systématiquement prioritaire surhyphens: autosi les deux sont appliqués (quel que soit l’ordre et même avec un!importantsurhyphens.Du coup, la classe appliquée actuellement sur KNACSS est aujourd'hui complètement inutile :
https://github.com/alsacreations/KNACSS/blob/master/sass/library/_misc.scss#L26
:(
La méthode qui fonctionnerait (bien plus tordue) serait :
Test en ligne (CodePen) : http://codepen.io/raphaelgoetter/pen/aBLQeL?editors=1100