Search code examples
htmlcsstextalignment

CSS center multiline text but with shortest line on top?

I have some html, css similar to this:

<div style="width: 40em; text-align: center;">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy tex
</div>

which renders like this but i want that the shortest line to be on top, like this. i am unable to figure out how to do this, any help would be appreciated!

Solution

  • Text is automatically displayed by web browser until the end of the block width. If you want something diferent you must use a break.

    <div style="width: 40em; text-align: center;">
    Lorem Ipsum is simply dummy text<br>
    of the printing and typesetting industry. Lorem Ipsum has been the 
    industry's standard dummy tex
</div>