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.

View Replies:
drbiskit replied on at Permalink Reply
drbiskit
Have you tried:
p {
-webkit-hyphens: none;
-moz-hyphens: none;
hyphens: none;
}
candydesign replied on at Permalink Reply
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!
drbiskit replied on at Permalink Reply
drbiskit
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!
candydesign replied on at Permalink Reply
Thank you so much for the reply. It still didn't work?
drbiskit replied on at Permalink Reply
drbiskit
It is working, you just need to delete your browser cache.

=0)
candydesign replied on at Permalink Reply
You legend!!!!

Woohoo! Thank you dude!
drbiskit replied on at Permalink Reply
drbiskit
no worries!
candydesign replied on at Permalink Reply
Oh, just realised it's still doing it on iPad and not iPhone? How is that possible? Any ideas?
drbiskit replied on at Permalink Reply
drbiskit
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...
candydesign replied on at Permalink Reply
Doh! Got it, done it!

Must remember to clear cache before asking for help!

Thanks again mate. Thank you so much!
drbiskit replied on at Permalink Reply
drbiskit
Don't worry, we've all done it!

=0)