title: Hanging Justification / indent after line break <br>?
body: <p>I am building a site with WordPress, and a lot of content is in verse. If a given line of verse breaks the line, it should be indented. Every line of verse gets a break, obviously, but since content needs to be responsive cannot insert breaks and spacing within any given line.</p>
  
  <p>I was originally using <code>&lt;br /&gt;</code> for the line breaks within a verse, and each verse was within its own <code>&lt;p&gt;</code>. However, <code>text-indent</code> only works on the first line of text. The solution I determined was to create a class like this:</p>
  
  <pre><code>.Verse {
      padding-left: 2em;
      text-indent: -2em;
      margin: 0;
          }
  </code></pre>
  
  <p>and then I would input the HTML as</p>
  
  <pre><code>&lt;p class="Verse"&gt;Verse Line 1
  &lt;p class="Verse"&gt;Verse Line 2
  &lt;p class="Verse"&gt;Verse Line 3
  &lt;p class="Verse"&gt;Verse Line 4&lt;/p&gt;
  &lt;br /&gt;
  &lt;p class="Verse"&gt;Verse 2 Line 1...(etc)
  </code></pre>
  
  <p>With that extra <code>&lt;br /&gt;</code> after each verse to deal with the 0 margin. This solution displays fine, so one would hope my search is over. But it isn't.</p>
  
  <p>Due to factors that, as of right now, are our of my control, I cannot separate each line with a <code>&lt;p&gt;</code>. The reason is that I am using a plug-in that allows visitors to export any given page as a PDF, ePub, or mobi, and that plug-in does not seem to read the paragraph styling. So when it exports something coded as I have done above it ignores the <code>margin 0;</code> which results in, as you would expect, large amounts of white space between every line of any given verse, and no distinction between verses.</p>
  
  <p>So what can I do that would allow me to instead code it with <code>&lt;br /&gt;</code> between lines</p>
  
  <pre><code>&lt;p class="Verse"&gt;Verse Line 1
  &lt;br /&gt;Verse Line 2
  &lt;br /&gt;Verse Line 3
  &lt;br /&gt;Verse Line 4&lt;/p&gt;
  
  &lt;p class="Verse"&gt;Verse 2 Line 1...(etc)
  </code></pre>
  
  <p>Which would allow the plug-in doing the exporting to maintain proper line spacing? Since <code>&lt;br /&gt;</code> isn't an element I cannot control style using it, but I need to do something to get the indent of -2em to adjust the line and compensate for the padding.</p>
  
  <p>I thought it might be possible to create a span which has <code>text-indent</code> of -2em and I apply it to the first word of every line after the <code>&lt;br /&gt;</code>, and have it work inline so whatever text comes after it follows immediately... But I couldn't figure out exactly how to make that work, even if it will. So any advice would be appreciated. Thanks!</p>
  
  <p>(I have poked around in the plugin to try and figure out if I can force it to take the paragraph formatting, and also to embed the fonts, for that matter, but I do not know Javascript and can't make any sense of it, and the plugin author does not seem to respond to requests). </p>