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

Question

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>

The code is right there, and it's fairly self-explanatory. – BoltClock Apr 22 '17 at 07:39 — BoltClock, Apr 22 '17 at 07:39
I have added the example code to the first post. – Vesmy Apr 22 '17 at 07:47 — Vesmy, Apr 22 '17 at 07:47

score 4 · Answer 1 · answered Apr 22 '17 at 08:28

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>

score 2 · Answer 2 · answered Jul 18 '20 at 12:03

Overriding text-align-last on the desired element with the selector ::first-line does the job.

section {
  text-align: center;
  text-align-last: left;
  width: 300px;
}
section::first-line {
  text-align-last: center;
  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>

Nice trick. The only problem - it doesn't make friends with `
` — dy_, Jan 12 '21 at 12:42

score 1 · Accepted Answer · answered Apr 22 '17 at 08:19

1

There does not appear to be a way to override text-align-last for when a block container has only one formatted line and text-align is center.

The spec says that text-align-last can be overridden, but only when text-align is start end. This does not seem to apply to any of the other values for text-align.

There are no selectors for elements with zero, one, or n formatted lines, nor is there a ::last-line counterpart to ::first-line. So it seems you're out of luck doing this with pure CSS. You're going to have to use a script to identify section elements with only one line (i.e. section elements whose text isn't wrapping), attach a class name to those elements, and apply text-align-last: center (or auto) to them.

answered Apr 22 '17 at 08:19

BoltClock

630,065
150
1,295
1,284

*You're going to have to use a script to identify section elements with only one line* How would I do that? – Apr 22 '17 at 13:10
@torazaburo: That's probably outside the scope of this question. (Just another way of saying "I don't know.") – BoltClock Apr 22 '17 at 13:13
See the answer below,,, – xianshenglu Jun 07 '18 at 06:27
@xianshenglu: I'm aware of it. – BoltClock Jun 07 '18 at 06:31

score 0 · Answer 4 · answered Jun 05 '19 at 23:14

I found using width: max-content, max-width:100%, and centering the element to work very well. If it's less than one line, the element will shrink to the size of the line and will be centered by a margin: 0 auto; If it extends beyond one line, it will stretch the element to the point where it hits the max-width:100% rule and then continue to the next line. Now that the block is at the max width, the text inside will follow the text-align rule.

.justify_unless_one_line{
    text-align: justify;
    margin: 0 auto;
    width: max-content;
    max-width: 100%;
}

.container{
  padding: 10px;
  width: 300px;
  border: 1px solid black;
  margin: 0 auto;
}

<section>
 <div class='container'>
 <h2>Single Line</h2>
  <p class="justify_unless_one_line">
      This is an example of one line
  </p>
  <h2>Many Lines</h2>
  <p class="justify_unless_one_line">
      This is an example of many lines. This is an example of many lines. This is an example of many lines. This is an example of many lines. This is an example of many lines. This is an example of many lines.
  </p>
  </div>
</section>

score -3 · Answer 5 · edited Apr 22 '17 at 12:58

-3

first line selector text-align: center;

section:nth(1){
   text-align: center;
}

edited Apr 22 '17 at 12:58

Zach Saucier

21,903
12
75
126

answered Apr 22 '17 at 07:57

Mas Hary

88
3

1

:nth(1)? Where did you pull that from? – BoltClock Apr 22 '17 at 08:04
Please provide a running snippet. – Apr 22 '17 at 13:11

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

5 Answers5