CODEWITHSUNDEEP
css
Mike G
Mike G

Reputation: 11

word-break: keep-all; not working? (with wordpress)

So , as an Embedded C developer, trying to help a friend out with CSS (which I had known a long-long time ago) is proving a pain.

My problem is that (using wordpress and having no access to the hosting account) I cannot seem to be able to stop words from breaking at the end of the line. I have tried everything I know of / have seen on the web, from whitespace to word-break: keep-all;, nothing seems to work. Has anyone had the same issue, I can only seem to be able to find answers for the exact opposite (people needing words to be broken);

the domain is http://diette.ro

Thanks in advance

Upvotes: 0

Views: 3891

Answers (3)

Bram Vanroy
Bram Vanroy

Reputation: 28475

It seems that the content is full of  s instead of spaces. An   is a non-breaking space which prevents words to be split/broken. The HTML output for one of the paragraphs now looks like this:

             Așadar, la noi în salon te vom întâmpină cu un ambient  cald și prietenos, îți  vom asculta nevoile și dorințele tale.  Totodată,  cu ajutorul analizei corporale vom afla și nevoile organismului iar împreună vom plănui o „călătorie” în care  vei învață cu siguranță,  noțiuni simple dar utile pentru a te împrietenii cu propriul organism ! În tot acest timp noi te vom susține oferindu-ți informațiile necesare, ca totul să devină realizabil și ușor de țintit! Paleta de servicii aflate la noi, cele de  recomandări și programe nutriționale, proceduri de remodelare corporală dar și masaje de relaxare și terapii energetice, ne vor ajuta să obținem rezultatele dorite.

It is no surprise that the text is not broken, because your HTML tells the browser not to break.

You should remove the CSS that you tried to add (the word-break ones) and simply get rid of those tags. The cause of this might be how your friend put the text in Wordpress. If he copied the text from a word processor, non-breaking spaces may have been added automatically, or something else happened. So what you do is, open the content in HTML form in Wordpress, do a find-and-replace of   with (a single space), and the problem should be solved.

Upvotes: 2

Syden
Syden

Reputation: 8625

You have the following !importants in style.css which override your keep-all:

pre, p {
  word-wrap: break-word !important;
  word-break: break-all !important;
}

You can either try using !important once more on your keep-all and make sure it reads it last:

p {
  word-break: keep-all !important;
}

Or remove those !important from style.css and give a deeper p impact without !important: (using a class or id)

p.class {
  word-break: keep-all;
}

Upvotes: 0

Ahmed Masud
Ahmed Masud

Reputation: 22382

The problem is not CSS the problem is that wordpress injects <p> and <br> tags in content. Ask your friend to install a noautop plugin, e.g., https://wordpress.org/plugins/toggle-wpautop/, or do what this answer says:

Removing <p> and <br/> tags in WordPress posts

Upvotes: 0

Related Questions