How can I use text-align-last if only I only have one line of text?
I would like to center-align the text, but the last line on the left is:
section {
text-align: center;
text-align-last: left;
}
This works well, but what if there is only one line? In this case, I would like to center-align the text, which doesn't work because the first line is also the last line. Is there some kind of selector for multiline text-only elements, or a selector for the first line (not a 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>
source to share
There is no way to override text-align-last
if the block container has only one formatted string, and text-align
- center
.
spec says it text-align-last
can be overridden, but only when text-align
- start end
. This is unlike any other meaning for text-align
.
There are no selectors for elements with zero, one or n formatted lines, and also ::last-line
with ::first-line
. It looks like you are out of luck with pure CSS. You would need to use a script to identify elements section
with only one line (i.e. section
elements whose text does not wrap), attach the class name to those elements, and apply text-align-last: center
(or auto
).
source to share
display: inline-block;
and put them in the container with
text-align: center;
. If there are multiple lines, nothing will change. But if there is only one line,
.child
will be smaller and 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>
source to share
I found using width: max-content, max-width:100%
and centering the element to work very well. If it is less than one line, the element will be scaled down to the size of the line and centered with. margin: 0 auto;
If it goes beyond one line, it stretches the element to the point where it reaches the rule max-width:100%
and then proceeds to the next line. Now that the block is at its maximum width, the text inside will follow the rule text-align
.
.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>
source to share