How do I set text-size to auto-fit modal container size?

[Sapphireslinger]

How do I get a modal or detail widget to automatically detect the container size and automatically shrink or enlarge the text so that poem lines don't wrap or go out of the container?

I click on a modal with a poem in it on my desktop, no problem:

Line 1 - XXXXXXXXXXXX

Line 2 - XXXXXXXXXXXXXXXX

I click on the same modal on my mobile. The modal container shrinks to fit the size of the new screen but the text doesn't! The poem lines are all wrapped (instead of the font shrinking to keep line from wrapping):

Line 1 - XXXXXXXX

XXXX

Line 2 - XXXXXXXX

XXXXXXXX

This is not good for poetry where part of the art is the line breaks.

Is there a "no-wrap, shrink or enlarge font-size instead, looking at parent div" command?

[Sapphireslinger]

I found https://tiddlywiki.com/#Hard%20Linebreaks%20with%20CSS which takes care of the linebreaks, so I don't have to type <br> after each line of poetry.

But when the tiddler width shrinks, either because I'm using Muuri Storyview, or viewing it on my smartphone, the poem lines still wrap. I just want the text to shrink so it doesn't have to wrap and mess up the structure of the poem.

I found "Just Use SVG" (the last option at the bottom of the page) at https://css-tricks.com/fitting-text-to-a-container/ But I don't know how to implement it. 

[Sapphireslinger]

I added "min-width: 500px" to the code from https://tiddlywiki.com/#Hard%20Linebreaks%20with%20CSS

... and it temporarily fixed it on my 3 column Muuri Storyview (desktop computer monitor)

... when I added a fourth column it began to overlap the poetry tiddler column, covering up the poem.

... when I added a fifth column, it switched and the poem stayed on top of everything else (but with a grey overlay over half of it) no matter how many columns I added.

[Michael Wiktowy]

Have you tried setting your font size based on view port units ... vw or vmin. You can use clamp to make sure they don't get too big or too small.

/Mike