Stop Hyphenation in Safari & Firefox
Permalink
Hi, sorry if this is the wrong place to ask about this. I am almost at the end of a site build and I have been working in Chrome throughout. Now however during my cross browser testing I see that Safari and iOS devices are hyphenating words and I don NOT want this at all.
The theme I am using is Supermint and in the SCSS I have found this code but editing it made no difference and I am pretty clueless in the CSS side of things.
// $Mixin $Hypens
// -------------------------------------//
//http://trentwalton.com/2011/09/07/css-hyphenation
@mixin css-hyphens($val) {
// Accepted values: [ none | manual | auto ]
-webkit-hyphens: $val; // Safari 5.1 thru 6, iOS 4.2 thru 6
-moz-hyphens: $val; // Firefox 16 thru 20
-ms-hyphens: $val; // IE10
-o-hyphens: $val; // PRESTO...haha LOL
hyphens: $val; // W3C standard
}
One possible solution was this:
p {
-webkit-hyphens: auto;
-moz-hyphens: auto;
hyphens: auto;
}
To turn hyphenation off, replace the auto value with manual. This will ensure that automatic hyphenation is turned off, but manually inserted soft hyphens (the entity) are still respected.
But it didn't work. I have emailed the theme creator but also would be keen to have any guidance from here. Thank guys! : )
Cos.
The theme I am using is Supermint and in the SCSS I have found this code but editing it made no difference and I am pretty clueless in the CSS side of things.
// $Mixin $Hypens
// -------------------------------------//
//http://trentwalton.com/2011/09/07/css-hyphenation
@mixin css-hyphens($val) {
// Accepted values: [ none | manual | auto ]
-webkit-hyphens: $val; // Safari 5.1 thru 6, iOS 4.2 thru 6
-moz-hyphens: $val; // Firefox 16 thru 20
-ms-hyphens: $val; // IE10
-o-hyphens: $val; // PRESTO...haha LOL
hyphens: $val; // W3C standard
}
One possible solution was this:
p {
-webkit-hyphens: auto;
-moz-hyphens: auto;
hyphens: auto;
}
To turn hyphenation off, replace the auto value with manual. This will ensure that automatic hyphenation is turned off, but manually inserted soft hyphens (the entity) are still respected.
But it didn't work. I have emailed the theme creator but also would be keen to have any guidance from here. Thank guys! : )
Cos.
Thank you, I tried that and it didn't work. This was the email from the theme creator.
to /home1/luckyli9/public_html/css/supermint.css
with this code inside :
body {
-webkit-hyphens: none;
-moz-hyphens: none;
-ms-hyphens: none;
-o-hyphens: none;
hyphens: none;
}
My reply is this:
I do not have that path. My CSS folder is empty. Please check the attachment. My CSS folder is under this path public_html/packages/theme_super_mint/themes/super_mint/sass/css
Is the theme installed into the wrong location? Is that possible and still work etc? Please if anyone can help it will be greatly appreciated, this one issue is holding back launch.
Thanks!
to /home1/luckyli9/public_html/css/supermint.css
with this code inside :
body {
-webkit-hyphens: none;
-moz-hyphens: none;
-ms-hyphens: none;
-o-hyphens: none;
hyphens: none;
}
My reply is this:
I do not have that path. My CSS folder is empty. Please check the attachment. My CSS folder is under this path public_html/packages/theme_super_mint/themes/super_mint/sass/css
Is the theme installed into the wrong location? Is that possible and still work etc? Please if anyone can help it will be greatly appreciated, this one issue is holding back launch.
Thanks!
You have a CSS file that is setting these hyphens:auto rules. It is here:
/packages/theme_super_mint/themes/super_mint/stylesheets/screen.css
Open it up and look for the following:
body{-webkit-hyphens:auto;-moz-hyphens:auto;-ms-hyphens:auto;-o-hyphens:auto;hyphens:auto;color:#444}
You need to find and replace it with this:
body{-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;-o-hyphens:none;hyphens:none;color:#444}
That should hopefully do the trick - I can't see it being written out in any of your other CSS files. See if that sorts it!
/packages/theme_super_mint/themes/super_mint/stylesheets/screen.css
Open it up and look for the following:
body{-webkit-hyphens:auto;-moz-hyphens:auto;-ms-hyphens:auto;-o-hyphens:auto;hyphens:auto;color:#444}
You need to find and replace it with this:
body{-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;-o-hyphens:none;hyphens:none;color:#444}
That should hopefully do the trick - I can't see it being written out in any of your other CSS files. See if that sorts it!
Thank you so much for the reply. It still didn't work?
It is working, you just need to delete your browser cache.
=0)
=0)
You legend!!!!
Woohoo! Thank you dude!
Woohoo! Thank you dude!
no worries!
Oh, just realised it's still doing it on iPad and not iPhone? How is that possible? Any ideas?
I don't see it happening on either here... are you sure you have cleared your cache?
http://www.wikihow.com/Clear-Your-Browser%27s-Cache-on-an-iPhone...
http://www.wikihow.com/Clear-Your-Browser%27s-Cache-on-an-iPhone...
Doh! Got it, done it!
Must remember to clear cache before asking for help!
Thanks again mate. Thank you so much!
Must remember to clear cache before asking for help!
Thanks again mate. Thank you so much!
Don't worry, we've all done it!
=0)
=0)
p {
-webkit-hyphens: none;
-moz-hyphens: none;
hyphens: none;
}