Fix words breaking on new line

[SleepyAl]

https://files.facepunch.com/forum/upload/208523/483f10b1-1587-407c-b5a5-34baf03ab79c/image.png

Currently if a post has text that breaks to a new line it will break inside a word which is really ugly and hard to read.

Here's how to fix it.

Main CSS, line 21721, class .ql-editor
Delete  word-break:break-all;

https://files.facepunch.com/forum/upload/208523/507d40bd-7f4c-4244-940f-8042ab9fe5ba/image.png

Line 21722 is also invalid (there is no break-word property for word-break), so it's referring back to the previous line, causing that line break issue. Delete both and you should be good to go.

[Jcw87]

This has been brought up several times.

What's going on with the wordwrap?
Word Wrap in Firefox
Where did the word wrap go?

The short of it is, you have to do a little more than just remove those properties because of a problem with really long text with no spaces. Like this:

aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

This is the custom CSS I use to fix both issues:

body .ql-editor {
overflow-wrap: break-word;
word-break: normal;
}
.postcontent {
min-width: 100px;
}

[Hezzy]

@garry easy fix?

[Mattk50]

here let me translate that

ea
sy
fi
x?

[Hezzy]

This is on the to do list, garry will be bringing more of the site over to the quill WYSIWYG editor so once that's done you should see an improvement

[NeatNit]

This keeps bugging me, I made a quick Google search to see how others deal with the same problem, and here:

Handling Long Words and URLs (Forcing Breaks, Hyphenation, Ellip..

This covers the whole topic with solutions AND explanations.

[Leestons]

Was there supposed to be a break mid word or something?

https://i.imgur.com/KS6JGJq.png

[NeatNit]

Yeah, on Microsoft Edge it looks like this:

https://files.facepunch.com/forum/upload/767/c122657e-c8d2-463a-95b1-aeb959e3e7ec/image.png

[NeatNit]

Edge:

https://files.facepunch.com/forum/upload/767/2709d50d-a6d4-4937-8304-18aa1128e9a3/image.png

Firefox:

https://files.facepunch.com/forum/upload/767/9b334eb0-7525-4795-80b9-35cb69373010/image.png

Chrome:

https://files.facepunch.com/forum/upload/767/5cc9f9fa-34d7-479a-8c83-f9fafada7f09/image.png

Custom CSS:

Based on the previous link (Handling Long Words and URLs (Forcing Breaks, Hyphenation, Ellip..) as well as this StackOverflow answer: Prevent child div from overflowing parent div

[Jcw87]

The funny thing about that link, is that it is recommending the exact crap that is breaking the word wrap on firefox here.
If that works (can't test it right now), then you should absolutely use that instead of min-width.

[NeatNit]

Looks like we'll have to use min-width after all. For some reason, overflow-x will cause the hyperlink GUI to be hidden behind the top of the post box.

overflow-x:

https://files.facepunch.com/forum/upload/767/f5692e82-0dd6-4872-a139-c163d2d5f101/image.png

min-width:

https://files.facepunch.com/forum/upload/767/458f375d-bfb5-421c-99a8-ec0f4a7f0ea1/image.png