Hyphenate not doing the trick, need some sugestions

I need some suggestion for dealing with long text. It is breaking the layout.
I tried the following but did not work.

/break-word does not wrap the word as I wanted, I am not too sure why/

.hyphenate {
overflow-wrap: break-word !important;
word-wrap: break-word !important;
-webkit-hyphens: auto !important;
-ms-hyphens: auto !important;
-moz-hyphens: auto !important;
hyphens: auto !important;
}​

the text is inside the following <divs>
<div class="section">
<div class="row">
<div class="column large-10 large-offset-1 xlarge-8 xlarge-offset-2 end ">
<div class="page-list list--line">
<article class="person person--list fade">
<img class="person__image">
<div class="person__content">
<p class="hyphenate">
/The following is causing the problem, text too long for column large-10/
<span>[[employee.role]] - [[employee.sector]]</span> <br />
<span>[[employee.number]]</span> <br />
<span>[[employee.email]]</span>

 

Hi there KuJiM,

and a warm welcome to these forums.

Browser support for hyphens, to say the least,
is rather sketchy and non-existent in Chrome.

Check out this link for further information...

http://caniuse.com/#search=hyphens​

​

coothead

 

Hi denis
Thx for that.
Yeah, I can see that, but the funny thing is that hyphen is not working for Firefox either. I am trying to find a workaround for this.

 

Hi there KuJiM,

in my tests, CSS hyphens worked in both Firefox and IE11.

​

coothead

 

Yeap. "<p class='hyphenate'>" is inheriting so many attributes from its parents that I think this is causing the hyphen not to work. I am troubleshooting.
Thx!