My webpage width is currently set to 100vw and adjusts responsively as the viewport size changes.
However, there seems to be a slight issue where certain words overflow without being pushed to the next line, causing a small horizontal scroll:
https://i.sstatic.net/290DX.png
Upon slightly narrowing the browser window, the word (tremit) finally wraps onto the next line.
It appears that there might be some sort of conditional rule in place for word wrapping, such as "keep the word on the same line until it overflows, then wrap it".
Now, my first question is: is this assumption accurate?
If indeed true, is there a method to completely disable this behavior, forcing all words to wrap when they reach the end of the line?
I initially thought that using overflow-wrap: anywhere; would solve this, but adding it to the <body> element didn't produce any changes:
body {
margin: 0;
font-family: 'Quicksand', sans-serif;
font-size: 150%;
width: 100vw;
overflow-wrap: anywhere;
}