I'm adding some poetry to my website. The problem is, when the screen size gets smaller, lines of the poem break. I want to show the part of the line that comes after the line break like they do in poetry books, when the verse doesn't fit the page width. Here's an example:
The quick brown fox jumps over the
lazy dog
The first line is aligned to left, the second however, is aligned to right. (This will only happen in small screens, of course.)
Is there any way to do this that is repeatable? This is not a one-time thing; I'm trying to create a standard with classes.
Use text-align-last
.box {
width: 350px;
border: 1px solid #000;
resize:horizontal;
overflow:auto;
}
.box * {
/*text-align:justify; uncomment this to see the justify effect, not bad too */
text-align-last: right;
display:inline-block;
}<div class="box">
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div><br>
<div>Ut enim ad minim veniam, quis nostrud exercitation ullamco.</div>
</div>Este artigo é coletado da Internet.
Se houver alguma infração, entre em [email protected] Delete.
deixe-me dizer algumas palavras