Docs

[nylelevi]

Hello,

Here is the page that I am having problems with: http://nylelevi.com/graphicdesign/

This is the problem I am having:

When I hover over some of the thumbnails, the post title will be hyphenated (and most will be hyphenated also when viewed on a smaller screen), making it look pretty ugly and difficult to read.

Is there a way to force the text to stop hyphenating please? I have searched the previous questions asked and I cant find any code that fixes it at the moment.

Thanks in advance
Nyle

[Rad]

Hi there,

Thanks for posting in.

It’s because your titles have it, for example, http://nylelevi.com/portfolio-item/kalniem-lv-logo/

Though, you may provide more details of the issue as 🙂 , like screenshots.

Thanks!

[nylelevi]

Hello,

Im talking about hyphenation in the middle of words, not where I have purposely put them.

Here are some screenshots of the issue:

http://imgur.com/AWnWvLG

http://imgur.com/rhaIhNP

http://imgur.com/v2Dh8nd

These are all from http://nylelevi.com/graphicdesign/ before you click on the thumbnail. If you just hover, you will see this happening.

Also I tested the page in other browsers, and it looks fine in Chrome, but the hyphenation occurs in Safari and Firefox

Thanks

[Lely]

Hi There,

Did you figure this out already? I can’t seem to duplicate your issue when I checked. See this:http://screencast-o-matic.com/watch/cD1IXDibXN. If not, please do share your browser and OS version so we can check further.

[nylelevi]

Hi,

Thanks for you reply

No unfortunately it’s still not working properly. However I just noticed that it does look fine when the browser is full screen like what you have in the recording.

If you make your browser window smaller you see the problem happening.

Im running Mac OS X El Capitan with Firefox 47.0

Thanks

[Rupok]

Hi there,

Thanks for updating. Yes I can replicate this on my end with Firefox on Mac OS X El Capitan. This style coming from The Grid plugin.

You can add this under Custom > CSS in the Customizer to overwrite this :

.tg-item .tg-cats-holder *, .tg-item .tg-item-excerpt, .tg-item .tg-item-title, .tg-item .tg-item-title a {
  hyphens: none!important;
}

Cheers!

[nylelevi]

That did it!

Thanks so much

[Joao]

Great to hear it, let us know if you need help with anything else.

Joao

[Pyanfar]

If I may add, having just sussed this out, to be complete, the code should also include

-moz-hyphens: none !important;
-ms-hyphens: none !important;
-webkit-hyphens: none !important;

to ensure across all browsers. Chrome ignores CSS hyphenation and doesn’t need any instructions. The Chrome exception is also useful to know as it explains why one user on Firefox has the issue and someone verifying it via Chrome won’t see it.

Hyphenation is an exception and The Grid developers made it the rule by setting it to “auto” in their plugin.

[Rad]

Thanks for sharing Karin!

[Author]

Posts