• Word Wrap in Firefox
    9 replies, posted
Line breaks are happening in the middle of words. Seems to be related to this in the css: word-break: break-all;
Yeah this was mentioned before, I think garry noticed it in the last thread.
So it was. I've done some searching and all the sources I can find that document the 'word-break' css property do not list 'break-word' as a valid value. Only chrome seems to think that this is valid. word-break - CSS CSS3 word-break property word-break | CSS-Tricks Garry probably got it confused with either of these, which are valid: overflow-wrap: break-word; word-wrap: break-word; What seems to be happening is that Firefox sees the 'break-all', applies it, then sees the 'break-word' and rightly ignores it, because it isn't valid. The result, is that 'break-all' takes effect, and it wraps by character instead of by word. Chrome sees 'break-all', applies it, then sees 'break-word' and decides that it's valid for some reason, and takes it off of 'break-all', which is the only reason it ""works"" on chrome. I fixed it by applying the following userstyle: .ql-container.ql-snow .ql-editor { word-break: normal; } This has the same effect as not including the 'word-break' property at all.
Does that fix ffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff
That was more challenging, but this seems to fix both problems: .ql-container.ql-snow .ql-editor {   word-break: normal; } body.page-forum .threadviewsection .postblock .postmain {   min-width: 100px; } Apparently, if you leave 'flex-direction' as row on a flex container, and do not set a minimum width on the flex items, it will break word wrapping in that exact way.
the above really works on Firefox!
Have applied this - seems to work on chrome too
Long thread titles are still wrapping in firefox.
Weird broken labels when the thread title size gets a bit too lo..
.title, .subtitle {   overflow-wrap: break-word;   word-break: normal; } body.page-forum .forumhead ul .content {   min-width: 100px; }
Sorry, you need to Log In to post a reply to this thread.