Internet Explorer 11 keeps splitting words

Question

Internet explorer keeps on splitting my words. Chrome and Firefox are working fine.

Here is my code and the link to the website: http://www.hgsainc.com/about/
Thanks for your help!

.page #main .entry-content {
    width: 100%;
    padding-right: 0;
    word-wrap: normal;
    -webkit-hyphens: none;
    -moz-hyphens: none;
    hyphens: none;
    table-layout: fixed;  
}

.page #main .entry-content p,
.page #main .entry-content span {
    font-size: 16px;
    line-height: 30px;
    text-align: right;
}

Answer 1

I haven't looked at your site, but it looks like you need to add the -ms-hyphens prefix to your css. You have the -webkit and -moz but no -ms:

-ms-hyphens: none;

See here for more info: http://msdn.microsoft.com/en-us/library/ie/hh771871(v=vs.85).aspx

Also, after looking into it a bit more, it looks like Opera doesn't support this, and neither do most mobile browsers: http://caniuse.com/css-hyphens - Just a heads up in case you come across that down the road.

Answer 2

After checking the developer tools in Internet Explorer, inspecting the paragraph that was having this problem showed a -ms-hyphens:auto; style in your code. You should probably add a style with -ms-hyphens:auto; to your block of styles to prevent this from happening.

The style that causes this is placed in http://www.hgsainc.com/wp-content/themes/twentythirteen/style.css, at the * 5.3 Entry Content part. You can also remove the hyphens styles from there to prevent having to do this.