How can I align the text that didn't fit the first line to right in CSS, like they do in poetry?

bedirhangn

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.

Temani Afif

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>

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

How can I fit a div to its content and align it to the right?

How may I align text to the left and text to the right in the same line?

How do I align the text in line with the picture?

How do I align text in the same line?

how i can fit text to an image with css

I want to align text centre in button but it didn't work when I added height in CSS

Align text to the left and right on the same line with CSS

`Phaser.Display.Align.In.Center` works well with the first line of my text but doesn't center my 2nd line. How do I fix it?

How do I align Label and Input on the same line to the right?

How can I left and right align text to center?

How can I right align column with text and input?

How can I align checkbox with text to right side of the screen?

How do I right align the text in a wx.ComboBox?

How do I make a text at both left and right align?

How do I align the Keyboard accelerator text to the right in UWP?

How do I align certain lines of text to the right in JavaFX?

How do I align a div containing text and a div containing an image on the same line in CSS?

How do I get CSS grid rows to align like columns?

How can I draw a line from my left and right box down to the middle of a text in CSS?

I can't seem to get these two buttons line up buttons like this. How can I do this?

How can I align a Material icon & header text on the same line?

How can I align text under a <hr> line properly?

How do I align a text on the same line as a button?

How do I remove ' and align text in a single line?

how do i align my th text in a same line

How do I align an input with the top of multi-line text?

How do I align text and buttons on the same line?

I can't align an image to the right

How to align first row of table with a line of text