text-align-last в CSS


Свойство text-align-last

Свойство text-align-last определяет способ выравнивания по горизонтали для последней строки текста в блоке или для строки идущей непосредственно перед принудительным разрывом. Если в тоже время строка является первой строкой блока, или первой строкой после принудительного разрыва, то свойство text-align-last имеет приоритет над свойством text-align . Только в случае, когда для свойства text-align явно указано значение выравнивание для первой и последней строк (в виде ‘start end’), text-align имеет приоритет.

Свойство text-align-last определено в спецификации CSS 3 модуль Text Level 3 (текст, уровень 3), применяется к блочные элементы, и действует на всех визуальные носителях, его значение наследуется от родительского элемента в иерархии документа, и по умолчанию принимает значение auto. На данный момент в браузерах Chrome, Safari, Opera поддержка данного свойства не реализована.

CSS :: Свойство text-align-last

css -свойство text-align-last (от англ. text align last – выравнивание текста в конце) используется для горизонтального выравнивания строчного содержимого последней строки в блочных элементах.

Характеристики

  • Значение по умолчанию: auto .
  • Применяется: к блочным элементам .
  • Наследуется: да .
  • Анимируется: нет .
  • JavaScript: object.style.textAlignLast=»value» .

Синтаксис

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

СSS3 Свойство text-align-last

Пример

Выровнить последнюю строку текста по трем элементам


div.a <
text-align: justify; /* Для Edge */
text-align-last: right;
>

div.b <
text-align: justify; /* Для Edge */
text-align-last: center;
>

div.c <
text-align: justify; /* Для Edge */
text-align-last: justify;
>

Определение и использование

Свойство text-align-last указывает, как выровнять последнюю строку текста.

Обратите внимание, что свойство text-align-last задает выравнивание для всех последних строк внутри выбранного элемента. Итак, если у вас есть

Примечание: В Edge/Internet Explorer свойство text-align-last работает только с текстом, который имеет «text-align: justify».

Значение по умолчанию: auto
Унаследованный: да
Анимируемый: нет Прочитайте о animatable
Версия: CSS3
JavaScript синтаксис: object.style.textAlignLast=»right» Попробовать

Поддержка браузеров

Числа в таблице указывают первую версию браузера, которая полностью поддерживает свойство.

Числа, за которыми следует -moz-, указывают первую версию, которая работала с префиксом.

Свойство
text-align-last 47.0 5.5* 49.0
12.0 -moz-
Не поддерживаемый 34.0

*В Edge/Internet Explorer, значения «start» И «end» не поддерживаются.

CSS Синтаксис

Значение свойств

Значение Описание Воспроизвести
auto Значение по умолчанию. Последняя строка является обоснованным и выравниваются по левому краю Воспроизвести »
left Последняя строка выравнивается влево Воспроизвести »
right Последняя строка выравнивается вправо Воспроизвести »
center Последняя строка выравнивается по центру Воспроизвести »
justify Последняя строка выравнивается как и остальные строки Воспроизвести »
start Последняя строка выравнивается в начале строки (слева, если направление текста слева направо, и справа направление текста справа налево) Воспроизвести »
end Последняя строка выравнивается в конце строки (справа, если направление текста слева направо, и слева направление текста справа налево) Воспроизвести »
initial Устанавливает для этого свойства значение по умолчанию. Прочитайте о initial Воспроизвести »
inherit Наследует это свойство от родительского элемента. Прочитайте о inherit

Примеры

Пример


Использовать свойство text-align-last только на самой последней строке в контейнере:

Илон Маск рекомендует:  Работа с типографикой

text-align-last

Easily manage projects with monday.com

text-align-last lets you control the alignment of the last (or only) line of text right before a forced line break — for example the end of a paragraph or the line right before a
tag.

At the time of this writing, only Mozilla browsers and Internet Explorer support text-align-last (with vendor prefixes), and each has a slightly different implementation. The property was supposed to start working in Chrome 35, but as of Chrome 40 it still requires the experimental web platforms flag. More detail on browser implementations in the Points of Interest.

Values

  • left aligns the last line of text to the left of the container.
  • right aligns the last line of text to the right of the container.
  • center centers the last line of text within the container.
  • justify justifies the last line of text so it spans the full width of the container, inserting space between words if needed to increase the line length.
  • start aligns the text to the «start» of the line based on the direction of the text — left for LTR languages, right for RTL languages.
  • end aligns the last line to the «end» of the line based on the direction of the text — right for LTR languages, left for RTL languages.
  • auto the default. Aligns the last line of text to match the element’s text-align property, if it is set. If it is not set, auto aligns the text to the start.
  • inherit applies the text-align-last property of the parent element.

This demo shows the different text-align-last values in action. Note: Internet Explorer does not support the start or end values.

Points of Interest


In Internet Explorer, text-align-last only works when the text-align of the rest of the text in the selected element is set to justify . Also, IE does not recognize the start or end value.

In Mozilla browsers, text-align-last will work on the last line before a forced line break even if there is no alignment specified for the rest of the text in the element.

It’s also worth knowing that text-align-last sets the alignment for all last lines within the selected element, not just the absolute last line of text. So, for example, if you have a div with five paragraphs in it, your text-align-last declaration will apply to the last line of each of the paragraphs.

If you want to use text-align-last on only the very last line in the container, you may be able to use :last-child or :last-of-type . Your CSS would look something like this:

In the demo below, the left side shows text-align-last: center; applied to a div with multiple paragraphs inside it. Notice that the last line of each paragraph is centered. The right side shows text-align-last: center; applied only to the last paragraph inside the div using :last-child .

Встречайте text-align-last

Три месяца назад SiDChik столкнулся с необходимостью расположить текст с выключкою по ширине (justify), однако последнюю строку текста выровнять по центру справа).

Решением этой задачи могло бы стать однако в тот момент оно поддерживалося только во браузере Internet Explorer — поэтому SiDChik поневоле вынужден был сочинить собственный плагин для jQuery, достигающий той же цели, полезный плод своего труда на Хабрахабре.

Илон Маск рекомендует:  Позиционирование элементов

С удовлетворением сообщаю, что тот момент начал медленно и постепенно отходить в прошлое: догоняя Internet Explorer, также и второй из двух наиболее популярных браузеров — Mozilla Firefox — получил поддержку в середине января закрыт тринадцатого числа). Суммарная доля пользователей IE и Файерфокса настолько значительна, что неминуемо окажет давление и на производителей остальных (менее популярных) браузеров, понуждая ко внедрению того же свойства. Всем нам, например, не так уж трудно заметить, движка WebKit был открыт по горячим следам внедрения в Файерфоксе (и даже чуть ли не прямо в тот же день).

Первой версией Файерфокса с поддержкою станет, вероятнее всего, именно этот Firefox разрабатывают в настоящее время и готовят к переходу через несколько дней по графику. Его релиза уместно ожидать ещё через три месяца — есть время приуготовиться к этому.

Свойство CSS text-align

Свойство CSS text-align отвечает за горизонтально выравнивание текста, а также картинок и других элементов. У свойства есть 4 возможных варианта выравнивания.

Синтаксис CSS text-align

  • center — выравнивание по центру области (например ширина области 500 пикселей, значит будет выравнивание по линии 250 пикселей)
  • justify — растягивание текста по всей ширине области
  • left — выравнивание по левому краю
  • right — выравнивание по правому краю
  • inherit — принять значение предка (родителя)

Чаще всего эти свойства применяются в блоках

Примечание:
Есть также свойство vertical-align, которое отвечает за вертикальное выравнивание.

Как сделать выравнивание текста в html


Пример №1. Выравнивание текста по левому краю

Выравнивание текста по левому краю. Действуют по умолчанию.

На странице преобразуется в следующее

Пример №2. Выравнивание текста и картинки по центру

Выравнивание текста по центру. Зачастую используются для заглавия статей или для вывода картинок по центру.

На странице преобразуется в следующее

Пример №3. Выравнивание текста по правому краю

Выравнивание текста по правому краю.

На странице преобразуется в следующее

Пример №4. Выравнивание текста по ширине всей области

Выравнивание текста по всей ширине. Получается, что выравнивание происходит и полевому, и по правому краю. Браузер автоматически добавляет пробелы.

На странице преобразуется в следующее

Иногда text-align: justify; может не работать. Это связано с наследованием и даже с работой браузера. В целом не рекомендуется использовать этот параметр.

Вместо свойства text-align можно также использовать атрибут align , который пишется вместе с тегом. Его можно использовать у различных тегов. Например:

Разница в тегах

в том, что последний делает переход на новую строку (вертикальный отступ), а div не делает.

CSS text-align-last Property

пример


Совместите последнюю строку

Определение и использование

Текст-Align-последнее свойство определяет способ выравнивания последней строки текста.

Примечание: Текст-Align-последнее свойство будет работать только для элементов с выравнивания текста имущества установлен в «justify» .

Значение по умолчанию: auto
Наследование: yes
Animatable: no. Read about animatable
Версия: CSS3
Синтаксис JavaScript: object .style.textAlignLast=»right» Try it

Поддержка браузеров

Числа в таблице указать первую версию браузера, которая полностью поддерживает свойство.

Числа с последующим -moz- указать первую версию, которая работала с приставкой.

Имущество
text-align-last 47,0 5.5 12,0 -moz- Не поддерживается 34,0

Примечание: В Internet Explorer, то «start» и «end» значения не поддерживаются.

CSS text-align-last

The text-align-last property defines how the last line of justified text is aligned before a forced line break.

A line break is where inline-level content breaks over into a new line. It can be either a , where it occurs due to wrapping, or a where it occurs due to explicit line-breaking controls, or due to the start or end of a block.

Илон Маск рекомендует:  Что такое код connection_timeout

The text-align-last property only affects inline-level content before a forced line break, as it is only concerned with the last line of text.

The text-align-last property is designed to work only on text that has a text-align value of justify .

Syntax

Possible Values

In addition, all CSS properties also accept the following CSS-wide keyword values as the sole component of their property value:


initial Represents the value specified as the property’s initial value. inherit Represents the computed value of the property on the element’s parent. unset This value acts as either inherit or initial , depending on whether the property is inherited or not. In other words, it sets all properties to their parent value if they are inheritable or to their initial value if not inheritable.

Basic Property Information

Example Code

Basic CSS

Working Example within an HTML Document

CSS Specifications

  • The text-align-last property is defined in CSS Text Module Level 3 (W3C Last Call Working Draft 10 October 2013).

Browser Support

The following table provided by Caniuse.com shows the level of browser support for this feature.

Vendor Prefixes

For maximum browser compatibility many web developers add browser-specific properties by using extensions such as -webkit- for Safari, Google Chrome, and Opera (newer versions), -ms- for Internet Explorer, -moz- for Firefox, -o- for older versions of Opera etc. As with any CSS property, if a browser doesn’t support a proprietary extension, it will simply ignore it.

This practice is not recommended by the W3C, however in many cases, the only way you can test a property is to include the CSS extension that is compatible with your browser.

The major browser manufacturers generally strive to adhere to the W3C specifications, and when they support a non-prefixed property, they typically remove the prefixed version. Also, W3C advises vendors to remove their prefixes for properties that reach Candidate Recommendation status.

Many developers use Autoprefixer, which is a postprocessor for CSS. Autoprefixer automatically adds vendor prefixes to your CSS so that you don’t need to. It also removes old, unnecessary prefixes from your CSS.

You can also use Autoprefixer with preprocessors such as Less and Sass.

CSS text-align-last attribute

Examples

The last line of the paragraph is aligned to the right:

Browser Support

Only Internet Explorer supports text-align-last attribute.

Firefox supports another alternative of the property attribute that -moz-text-align-last attribute.

Internet Explorer does not support the «start» and «end» value.

Definition and Usage

text-align-last attribute specifies how to align the text of the last line.

Note: text-align-last attribute works only when the «justify» the text-align property is set.

Center last line of justified text in Safari and Chrome (“text-align-last” not working)

Hi I am trying to format my web paragraphs so that the text is justified and the last line is centered. I found the CSS property «text-align-last» which allows me to specify the alignment for the last line.

The problem is that this property is not supported by Chrome and Safari (yet. ).

Anyone have an alternative or a trick to do that?

1 Answer 1

I don’t think it’s possible in CSS alone.

Here’s a JavaScript solution, in which a clone lies behind the element. The element has text-align: justify and the clone has text-align: center .

The code then reduces the height of the original element so that only the clone’s last line displays.

Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL