CSS word overflow issue
Answered
Woodwasp posted this in #help-forum
WoodwaspOP
Not sure if this is Next.js-specific but this is the only time this has happened to me.
I'm building a website and I have a h2 at the front home page. On desktop it is fine, but when it gets resized to mobile the word breaks in the middle and overflows onto a new line. I do not want it to create a horizontal scroll so
I've tried word-wrap, overflow-wrap, and word-break, and
Image 1: The Next.js code in question. Everything works fine EXCEPT for the h2 when the size of the window is re-adjusted
Image 2: The Sass code that I used to style the h2 and its containers.
Image 3: The h2 without being resized.
Image 4: The h2 when the window is resized.
Any help would be appreciated.
I'm building a website and I have a h2 at the front home page. On desktop it is fine, but when it gets resized to mobile the word breaks in the middle and overflows onto a new line. I do not want it to create a horizontal scroll so
white-space: nowrap is not an option.I've tried word-wrap, overflow-wrap, and word-break, and
font-size: clamp() to no avail. I've been losing my mind over this. Image 1: The Next.js code in question. Everything works fine EXCEPT for the h2 when the size of the window is re-adjusted
Image 2: The Sass code that I used to style the h2 and its containers.
Image 3: The h2 without being resized.
Image 4: The h2 when the window is resized.
Any help would be appreciated.
Answered by Woodwasp
I found the issue. I was using a library called
react-reveal and used an effect that split every letter in the word into its own span. There was no way I could have used anything else so I just used media queries and that solved the issue.1 Reply
WoodwaspOP
I found the issue. I was using a library called
react-reveal and used an effect that split every letter in the word into its own span. There was no way I could have used anything else so I just used media queries and that solved the issue.Answer