Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How can I use text-align-last except when I have only one line of text?

Tags:

I would like to align text to the center, but last line to the left:

section {
    text-align: center;
    text-align-last: left;
}

It works well, but what if there is only one line? In this case, I would like to align text to the center, which doesn't work, because the first line is also last line. Is there any selector for elements with only multiline text or selector for first line (not pseudo-element :first-line)?

Live Example:

section {
  text-align: center;
  text-align-last: left;
  width: 300px;
}
<strong>This works:</strong>
<section>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam aliquam turpis consectetur diam fringilla, vel ultrices sapien bibendum. Maecenas pulvinar in nisl at mattis. Duis nisi risus, rhoncus sit amet ornare malesuada.</section>

<strong>Next line should be centered (something like text-align-first?):</strong>
<section>Lorem ipsum dolor sit amet.</section>
like image 620
Vesmy Avatar asked Apr 22 '17 07:04

Vesmy


1 Answers

Finally, I invented another solution. I will set all the elements display: inline-block; and place them into the container with text-align: center;. If there are multiple lines, nothing will change. But if there is only one line, .child will have smaller width and is centered.

.container {
  text-align: center;
  width: 300px;
}

.child {
  display: inline-block;
  text-align: center;
  text-align-last: left;
  width: auto;
}
<section class="container">
    <strong>This works:</strong>
    <section class="child">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam aliquam turpis consectetur diam fringilla, vel ultrices sapien bibendum. Maecenas pulvinar in nisl at mattis. Duis nisi risus, rhoncus sit amet ornare malesuada.</section>
    <strong>Next line should be centered</strong>
    <section class="child">Lorem ipsum dolor sit amet.</section>
</section>
like image 131
Vesmy Avatar answered Sep 25 '22 11:09

Vesmy