Paragraph in div is not breaking word using CSS

Question

Problem:

Check Here, Sample Page With CSS Problem and here is a VIDEO to explain the problem

Details Of Problem:

Am using ckeditor to fill my content, but looks that word wrapping is conflicting with WYSIWYG from CKEditor...

If I put in CKEditor long line, I expect it gets word-wrapped smoothly.

But what I have is random break-word works on 95% of my cases!

What I Tried:

I tried and researched but each time there is a case where it just won't work for some scenarios!.

stackoverflow break-word question

CSS tricks and tips

Can this be a browser problem or?

it is reproducable, just go to https://progresif.sajilni.com/event/test-event-6272 and use inspector just like i shown in the video here https://res.cloudinary.com/shareefhiasat/video/upload/v1565764742/video_of_break_word_problem_picpht.mp4 you will see the words is not wrapped, you can play with that page using developer tools ! — shareef, Aug 15 '19 at 09:23
Are the ` ` between each word always generated? If so, that would seem like a problem with the CKEditor. Sometimes formatting is messed up when copying text from a document into an editor. Is that the case here? — Emiel Zuurbier, Aug 15 '19 at 10:29
@EmielZuurbier yes you are right, any suggestions to work this around, smart and smoothly for general cases at least thanks — shareef, Aug 15 '19 at 16:29

score 0 · Answer 1 · answered Aug 15 '19 at 10:19

0

@shareef you need to remove all &nbsp then you need to use word-break: break-word; in your p tag

answered Aug 15 '19 at 10:19

Developer Tanbir

346
2
13

cant do, my only option is with the div because as i said am using CKEditor and those p is auto-generated ( i can't control) – shareef Aug 15 '19 at 10:20
@shareef if you add **padding-right:0;** of **.event-instructions** element then your paragraph will be break and show. – Developer Tanbir Aug 15 '19 at 13:09

score 0 · Accepted Answer · edited Aug 18 '19 at 08:05

0

Paste this script anywhere on your page. It will manually remove all the   characters found in all elements inside the .event-text container and replaces them with spaces.

window.addEventListener('DOMContentLoaded', () => {
    const texts = document.querySelectorAll('.event-text *');
    texts.forEach(text => text.innerText = text.innerText.replace(/\u00a0/g, ' '));
});

This is a hack, not a permanent solution. I strongly advise you to contact the folks at CKEditor and ask them for a fix.

For more detailed other options with CKEditor configuration,ckeditor unwanted nbsp characters you may check

edited Aug 18 '19 at 08:05

shareef

9,255
13
58
89

answered Aug 15 '19 at 20:42

Emiel Zuurbier

19,095
3
17
32

thanks for pushing my thinking into right direction, i have used that hack and it works, better you can check https://stackoverflow.com/questions/9741620/ckeditor-unwanted-nbsp-characters – shareef Aug 18 '19 at 08:05
jquery solution for me `$(".event-text").html($(".event-text").html().replace(/ /g, ' '));` – shareef Aug 18 '19 at 13:51

Paragraph in div is not breaking word using CSS

2 Answers2