hello compatriots,
I’m working on a responsive design and have a Heading element that contains a proper noun (like a business or client name) that keeps breaking across lines on smaller breakpoints, separating the words.
Example of the Problem (on Mobile): “Welcome to the New York Coffee Shop” (The line break happens after “York”)
My Goal: I need to force a group of words, like “New York Coffee Shop,” to always stay together on a single line, even if the entire heading has to wrap to a new line.
I believe the standard developer solutions are:
- Using the HTML Non-Breaking Space (
) in the content editor. - Applying
white-space: nowrap;via custom CSS to a<span>wrapper.
My Question:
Is there currently a native Bricks setting, control, or toggle (in Typography or Layout) that allows us to achieve the effect of on a selected group of words without having to manually edit the HTML or write custom CSS?
If not, I’d like to suggest it as a feature. A simple option to prevent a word break at the cursor location would be a major quality-of-life improvement for responsive headline design.
Thanks for your help!