Gah!! I hate it when I get curious about something... I can't let it go!
So, wrapping the above code in a div with a maximum width would fix the wide display issue (attachment 1). Setting the max-width to the perfect width of your verse would fix a few things...assuming the display is at least that wide. [edit] perhaps you could put a notice at the beginning of the book stating that the material is best viewed in landscape mode??
And if you add the min-width element, then that solves the narrow display issue (attachment 2)...assuming the app/reader creates scroll bars to see text off the edge of the screen...I don't think this is too common, but I thought I would throw that out there.
Here's the code again with the div and the line numbers added:
Code:
div.verse {width:100%; min-width:490px; max-width:535px; margin:0}
p {text-transform:uppercase; margin: .25em; font-family:serif}
span {text-transform:none; display:block; margin-left:2em}
span.right {float:right}
<div class="verse">
<p>Orsino <span>If music be the food of love, play on.<br />Give me excess of it, that, surfeiting,<br />The appetit may sicken and so die.<br />That strain again! It had a dying fall.<br />O, it came o'er my ear like the sweet sound<span class="right">5</span><br />That breathes upon a bank of violets,<br />Stealing and giving odor. Enough; no more.<br />'Tis not so sweet now as it was before.<br />O spirit of love, how quick and fresh art thou,<br />That, notwithstanding thy capacity<span class="right">10</span><br />Receiveth as the sea, naught enters there,<br />Of what validity and pitch soe'er,<br />But falls into abatement and low price<br />Even in a minute. So full of shapes is fancy<br />That it alone is high fantastical.<span class="right">15</span></span></p>
<p>Curio <span>Will you go hunt, my lord?</span></p>
<p>Orsino <span class="right">What, Curio? </span></p>
<p>Curio <span class="right">The hart.</span></p>
<p>Orsino <span>Why, so I do, the noblest that I have.</span></p>
</div>
Cheers!