#CSS word overflow issue

3 messages · Page 1 of 1 (latest)

heady crane
#

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 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.

image.png image.png image.png image.png
sand anchorBOT
#
Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

      🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in <id:customize>

      ✅ You can mark a message as the answer for your post with `Right click -> Apps -> Mark Solution`
      (if you don't see the option, try refreshing Discord with Ctrl + R)
heady crane
#

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.