I'm making a trading card game kind of like Magic: The Gathering, and i have several web pages that should be filled with pictures of full cards, and text versions of the cards. This would be pretty easy if i just wanted images. <img> elements already do exactly what i want with how lines of them wrap to fit the screen, and if they're all the same size they'll tile into a nice grid.
However, i also want text versions of every card, for screen readers and people with slow internet connections. <details> might be a good way to do this, but those get put on their own lines instead of staying on the same line.
<nobr> seems like it would work until the edge of the screen, when people would start having to scroll sideways to see more cards.
I could put everything in a table but the whole point of this question is that i don't want a fixed number of cells per row.
Adding the text as alt text to the images and scrapping <details> would work, but not well unless there's a way to have formatting there. At least a line break.
In short, i need to make a bunch of <details> elements with images as the summaries display on the same line but still wrap at the end of the screen. How can i? I'm open to using CSS, i just prefer to avoid it where HTML works instead.