Mastodawn

Siderea, Sibylla Bostoniensis Jul 10, 2023

CSS question I don't know how to Google:

I have a string of the form "Stuff and Nonsense". It's in a H1. If the viewport is too small to show it all in one line, naturally, it breaks it on a space, like

"Stuff and
Nonsense".

Yuck. I can use a   to make it instead break

"Stuff
and Nonsense"

which is worse.

What I want is to have a responsive(tm) solution that is contingent, such that if it has to break at all, it then breaks in TWO places:
"Stuff
and
Nonsense".

Is that a thing?

Show thread

TerrorJacktyl Jul 10, 2023

@siderea one solution might be
1. Determine what width (eg in pixels) of the screen causes the text to break
2. Use a JavaScript media query to check if the current screen’s max width is small than said size
3. Use that Boolean in your JavaScript to (presumably with React) do some conditional rendering

Hope that’s helpful ☺️

Show thread

Siderea, Sibylla Bostoniensis

@terrorjacktyl Thanks! I just figured out an all-CSS solution using viewports and the "max-width" property: when the viewport is less than the width of the full string, set the width of the string's container to something smaller than both "Stuff" and "Nonsense", which forces the double line break.