Observe the following example:
https://codepen.io/gamepro5/pen/NWYjaae
font-family: TF2 Secondary, Verdana, Geneva, sans-serif;
font-size: 15px;
overflow-wrap: break-word;
white-space: pre-line;
Both of these DOM nodes are identical. I put all the DOM note inside a foreign object, and for some reason the one inside the foreign object has different font behavior causing it to wrap more. It seems like the width of the characters are ever so slightly larger.
Is this just a bug with chrome that is out of my control? I see no reason why this would happen.