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.