Свойство 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.

Читайте также

Обсуждение (0)

Войдите или зарегистрируйтесь для того чтобы оставлять комментарии