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

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>


There is a CSS pseudo-element for selecting the first line of text that you could use here:

::first-line

Update: Despite the selector being supported in all major browsers it appears that several browsers don't allow text-align to be applied to this selector. So this is not a reliable cross-browser solution (yet?), I will leave it here in case it's useful to anyone or becomes valid in the future.

#wrapper {
  display: block;
  width: 350px;
  height: auto;
  border: 1px solid #000;
}
#wrapper span {
  display: block;
  text-align: right;
}
#wrapper span::first-line {
  text-align: left;
}
<div id="wrapper">
  <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
  <span>Ut enim ad minim veniam, quis nostrud exercitation ullamco.</span>
  <span>Duis aute irure dolor in reprehenderit in voluptate velit esse.</span>
</div>

This does assume you will have at most 1 line of overflow (all overflowing lines will be right aligned) but at that point it will look a little strange no matter the styling.

Tags:

Html

Css