I am making a mobile web application to display church hymns. A verse in a hymn should ideally not be broken into two lines when it exceeds the width of the screen, but it cannot be avoided with varying mobile screen sizes.
Instead I would like to have text, that's is wrapped to a new line, be right aligned.
How do I with CSS ensure that wrapped text is right aligned and where the text otherwise is left aligned.
Screenshot of how I want the result to look like:
Here is my HTML:
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br/>
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.<br/>
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.<br/>
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
</p>