There are any number of ways to set the display for character name before their line. That pretty much just depends on how you want to do it. CSS can be very powerful. The problem is - as you mentioned - making sure all the devices will display it properly. Personally, I would go with the most basic coding that would still appear properly.
Code:
<p class="char">Name</p>
<p class="line">What they say</p>
css:
.char {text-transform:uppercase; font-family:serif; margin-left: .5em}
.line {font-family:sans-serif; margin-left: 2em}
As far as the spacing for those lines - yes, you COULD use nbsp, but you really can't control the size of the reader's display...those spaces could cause the words to flow to the next line anyway. This is a long standing problem with things like plays and poetry.
I personally don't see any added benefit to having those spaces...just align them to the left like the other lines.