div 中的段落没有使用 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?

Answer 1

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

Answer 2

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