Create a more flexible component which allows the text to wrap based on the content rather than the viewport size.
Here, Mandy Michael explores similar territory to Every Layout in suggesting that not all responsive pattern challenges require, or indeed are best served by, media queries.
The example here is a pipe-separated text pair (I could imagine an author and publish date meta line) which Mandy wants to wrap (with pipe separator hidden) only when the content and container require it, rather than based on the less-relevant viewport width.
She uses a clever combination of flex-wrap:wrap
, generated content, padding, transform
and overflow-y:hidden
to achieve her goal.
(Via @Mandy_Kerr)