Solved: HTML/CSS Formatting for Hanging Indent Lines in Poems

The traditional formatting of poetry uses a hanging indent to show when a poem-line is longer than a page-line. This has annoyed me in the past since I could not see how to do it in HTML/CSS. I have finally figured it out. Janky as it appears to the untrained eye, there is no nice looking (in code) way around the problem, since HTML ignores extra whitespace (tabs, line breaks, and spaces — with good reason). There is a CSS property of:

text-indent: hanging;

but
1) it doesn’t solve the problem since it applies to block elements, whereas in poetry you want the hanging indent to apply to all the lines in a stanza or paragraph, not just the first line
&
2) it is in development/draft/experimental status, currently unsupported by all major browsers

So, for those who know what I’m talking about, the necessary code is thus:
For each ‘line’ of the poem (the reason this is important is for long lines that wrap, or for small screens where even not-very-long lines wrap) you do this:

<span class="poem-line"> TEXT TEXT TEXT </span><br />

For the CSS class I’m calling “poem-line”, you do this:

.poem-line {
display: inline-block;
text-indent: -2em;
padding-left: 2em;
}

The reason for declaring them inline blocks is that text-indent and padding have no effect on standard inline elements, only block elements. (This is for static pages or WordPress or other web applications you can control. If you have WordPress.com free, if it is even possible, you would have to add the css code in <style=””></style> tags to EACH LINE, since you can’t use custom, CSS in the cheaper WordPress.com plans. You could leave the class=”” declaration off though) [You can also declare your indent values with px, rem, % values and other ways. They do not have to be +/-2em

For stanzas, of course, you would wrap them in <p> tags. For single stanza poems, a more complete example would be:

<p>
<span class="poem-line"> TEXT TEXT TEXT </span><br />
<span class="poem-line"> TEXT TEXT TEXT </span><br />  
<span class="poem-line"> TEXT TEXT TEXT </span><br />
<span class="poem-line"> etc </span></br>
</p>

To see an example in action: [I’ve taken down my old website and will have to upload a new example at some point]
Try resizing the window and watch the lines reflow with hanging indents, no matter how small you make it.