• Word Wrap in Firefox
    6 replies, posted
  • Avatar of Johncw87
  • Line breaks are happening in the middle of words. Seems to be related to this in the css: word-break: break-all;
  • Avatar of Johncw87
  • 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.
  • Avatar of garry
  • Does that fix ffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff
  • Avatar of Johncw87
  • 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.