Свойство text-align-last
Задает выравнивание текста для последней строки текста элемента
text-align-last: center;
- поддерживается начиная с
- частичная поддержка до
- не поддерживается
Значения
text-align-last: left;
Последняя строка текста в блоке выравнивается по левому краю
<style>
.example-1 {
text-align: right;
text-align-last: left;
}
</style>
<div class="example-1">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Atque, minus, officiis, facere, ipsum repellendus optio
accusamus blanditiis voluptate ipsa nemo asperiores deleniti
cumque quisquam.</p>
</div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque, minus, officiis, facere, ipsum repellendus optio accusamus blanditiis voluptate ipsa nemo asperiores deleniti cumque quisquam.
text-align-last: center;
Последняя строка текста в блоке выравнивается по центру
<style>
.example-2 {
text-align: justify;
text-align-last: center;
}
</style>
<div class="example-2">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Atque, minus, officiis, facere, ipsum repellendus optio
accusamus blanditiis voluptate ipsa nemo asperiores deleniti
cumque quisquam.</p>
</div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque, minus, officiis, facere, ipsum repellendus optio accusamus blanditiis voluptate ipsa nemo asperiores deleniti cumque quisquam.
text-align-last: right;
Последняя строка текста в блоке выравнивается по правому краю
<style>
.example-3 {
text-align-last: right;
}
</style>
<div class="example-3">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Atque, minus, officiis, facere, ipsum repellendus optio
accusamus blanditiis voluptate ipsa nemo asperiores deleniti
cumque quisquam.</p>
</div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque, minus, officiis, facere, ipsum repellendus optio accusamus blanditiis voluptate ipsa nemo asperiores deleniti cumque quisquam.
text-align-last: justify;
Последняя строка текста в блоке выравнивается по левому и правому краям
<style>
.example-4 {
text-align: justify;
text-align-last: justify;
}
</style>
<div class="example-4">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Atque, minus, officiis, facere, ipsum repellendus optio
accusamus blanditiis voluptate ipsa nemo asperiores deleniti
cumque quisquam.</p>
</div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque, minus, officiis, facere, ipsum repellendus optio accusamus blanditiis voluptate ipsa nemo asperiores deleniti cumque quisquam.
text-align-last: start;
Аналогично значению left. Если текст идет слева направо, то текст последней строки будет выравниваться по левому краю. Если текст идет справа налево, то текст последней строки будет выравниваться по правому краю
<style>
.example-5 {
text-align: end;
text-align-last: start;
}
</style>
<div class="example-5">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Atque, minus, officiis, facere, ipsum repellendus optio
accusamus blanditiis voluptate ipsa nemo asperiores deleniti
cumque quisquam.</p>
</div>
<div class="example-5" dir="rtl">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Atque, minus, officiis, facere, ipsum repellendus optio
accusamus blanditiis voluptate ipsa nemo asperiores deleniti
cumque quisquam.</p>
</div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque, minus, officiis, facere, ipsum repellendus optio accusamus blanditiis voluptate ipsa nemo asperiores deleniti cumque quisquam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque, minus, officiis, facere, ipsum repellendus optio accusamus blanditiis voluptate ipsa nemo asperiores deleniti cumque quisquam.
text-align-last: end;
Аналогично значению right. Если текст идет слева направо, то текст последней строки будет выравниваться по правому краю. Если текст идет справа налево, то текст последней строки будет выравниваться по левому краю
<style>
.example-6 {
text-align: start;
text-align-last: end;
}
</style>
<div class="example-6">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Atque, minus, officiis, facere, ipsum repellendus optio
accusamus blanditiis voluptate ipsa nemo asperiores deleniti
cumque quisquam.</p>
</div>
<div class="example-6" dir="rtl">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Atque, minus, officiis, facere, ipsum repellendus optio
accusamus blanditiis voluptate ipsa nemo asperiores deleniti
cumque quisquam.</p>
</div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque, minus, officiis, facere, ipsum repellendus optio accusamus blanditiis voluptate ipsa nemo asperiores deleniti cumque quisquam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque, minus, officiis, facere, ipsum repellendus optio accusamus blanditiis voluptate ipsa nemo asperiores deleniti cumque quisquam.