Этот урок появился после того, как его автор обратил внимание на распространенную проблему верстки, о которой не знал раньше. Заметив ее однажды, он стал замечать ее повсеместно, искать решение. В этом помогли небольшие нововведения CSS для настойки отображения текста. В этом уроке мы расскажем и том, и о другом.

Удаление пробелов после последних букв

В верстке веб-страниц свойство расстояния между буквами добавляет пробел после последней буквы элемента HTML. Например, в абзаце с текстом обычного размера, выровненном влево, этот пробел в конце невидим и неважен. Но в тексте с более крупным шрифтом, выровненном по центру, таком как заголовок, наличие этого пробела может нарушить выравнивание текста. К примеру, использование следующего кода CSS:

body {
    margin: 0;
    min-height: 100vh;
    border-left: 25rem solid black;
    border-right: 25rem solid black;
}
h1 {
    text-align: center;
    text-transform: uppercase;
    font-family: Agency FB, Helvetica, sans-serif;
    font-size: 8rem;
    letter-spacing: 2rem;
}

Создает следующий эффект у элемента заголовка h1:

Обратите внимание на дополнительный пробел справа 

Текст выглядит не совсем выровнено из-за создания свойством расстояния между буквами лишнего пробела после последней буквы, который особо заметен при выборе или выделении текста:

Лишний пробел, созданный свойством расстояния между буквами, особо виден на выделенном тексте 

Решение

Передвинем текст вправо, используя такое же значения, как у свойства расстояния между буквами:

h1 {
    margin-left: 2rem;
}

Это компенсирует эффект от негативного влияния свойства расстояния между буквами на последнюю букву, создав правильно выровненный текст.

Обратите внимание, можно задать это значение немного другим, чтобы добиться правильного оптического выравнивания, в этом случае значение внешнего левого отступа 1,7rem создаст более визуально приятный результат.

Свойство выравнивания последней строки текста

Если задано, чтобы текст равномерно заполнял всю строку с помощью свойства равномерного выравнивания текста, всегда встает вопрос, как должна располагаться последняя строка. Следующий код CSS, примененный к элементу блока цитаты:

blockquote {
    font-family: Avenir, Helvetica, sans-serif;
    margin: 0 auto;
    width: 20%;
    text-align: justify;
    font-size: 1.3;
    line-height: 1.5;
}

...всегда задает расположение последней строки слева.

Но если Вам нужно другое расположение, можно использовать свойство выравнивания последней строки. У него может быть одно из следующих значений:

text-align-last: auto|left|right|center|justify|start|end|initial|inherit;

Большинство значений интуитивно понятны: автоматическое, т. е., значение по умолчанию, которое в этом случае всегда левое; левое; правое; по центру; выровненное; по началу, т. е., в зависимости от заданного направления текста левое для слева направо и правое для справа налево; по концу, т. е., в зависимости от заданного направления текста правое для слева направо и левое для справа налево; изначальное, т. е., значение по умолчанию; наследованное, т. е., такое же как у родительского элемента.

Свойство выравнивания текста поддержано во всех современных версиях браузеров Internet Explorer, Edge, Firefox, Chrome, Opera и их мобильных версиях, кроме версий браузера Opera, и во многих мобильных браузерах, но не поддерживается никакими версиями браузера Safari. Очень старым версиям браузера Firefox была нужна приставка производителя.

При добавлении значения правое в код CSS выше:

p {
    text-align-last: right;
}

Получим следующее:

Последняя строка этого равномерно заполняющего всю строку текста выравнена вправо 

Это может быть небольшим, но эффектным завершением для текста, особенно если он расположен в высокой и узкой колонке.

Автор урока Dudley Storey

Перевод — Дежурка

Смотрите также:

• Эффекты прописных и строчных букв с использованием JavaScript или CSS
• Создание эффекта набора текста
• Использование блочных и строчных элементов