0

I'm having trouble with getting a long paragraph of words to wrap to the next line without them breaking at all, even with hyphens.

My code:

p {
     white-space: pre-wrap !important;
     word-wrap: normal !important;
     word-break: normal !important;
     overflow-wrap: normal !important;
}

On Chrome, the word wrap works fine. No hyphens, just beautiful word-wrap with WHOLE words. On Firefox and Edge, I get word-wrap with HYPHENS, cutting up words between two lines.

What am I doing wrong here?

TylerH
  • 20,799
  • 66
  • 75
  • 101
Jackson Hayes
  • 1

2 Answers2

0

I'm wondering if maybe you have other code thats conflicting with the p tags. because, what i'm finding is that your code:

white-space: pre-wrap;

is the only place your changing from the default, which by default words dont wrap.

Maybe provide us with some more of your code, if possible.

Russell Daley
  • 11
  • 2
  • It's at the bottom of my styles sheet. This is a wordpress install, modified 2013 theme. AFAIK, an `!important` override should override a previous `!important`, right? – Jackson Hayes Nov 21 '17 at 01:23
  • Additionally, if I inspect a `p` element in Firefox (one place it's breaking), it shows that the `white-space: pre-wrap`; is not being overridden or canceled out. – Jackson Hayes Nov 21 '17 at 01:59
  • a style with !important will override all others styles. But then if you have multiple !important's it can get tricky trying to track down what exactly is happening, I try to use them very sparingly. Here's a good write up about it [link](https://stackoverflow.com/questions/3706819/what-are-the-implications-of-using-important-in-css) – Russell Daley Nov 22 '17 at 19:03
0

Dang it. Stupid answer:

hyphens: none; -webkit-hyphens: none;

I can't believe I didn't think of this earlier.

Jackson Hayes
  • 1