Text-align-last - CSS-хитрощі

Anonim

text-align-lastдозволяє контролювати вирівнювання останнього (або єдиного) рядка тексту безпосередньо перед вимушеним розривом рядка - наприклад, кінець абзацу або рядок прямо перед
тегом.

.intro-graph ( text-align-last: center; )

На момент написання цієї статті підтримують лише браузери Mozilla та Internet Explorer text-align-last(із префіксами постачальників), і кожен з них має дещо іншу реалізацію. Властивість повинна була запрацювати в Chrome 35, але станом на Chrome 40 вона все ще вимагає позначення експериментальних веб-платформ. Детальніше про реалізації браузера в Точках інтересів.

Цінності

  • left вирівнює останній рядок тексту ліворуч від контейнера.
  • rightвирівнює останній рядок тексту праворуч від контейнера.
  • center центрує останній рядок тексту в контейнері.
  • justify вирівнює останній рядок тексту, щоб він охоплював всю ширину контейнера, вставляючи пробіл між словами, якщо потрібно для збільшення довжини рядка.
  • startвирівнює текст до "початку" рядка на основі directionтексту - ліворуч для мов LTR, праворуч для мов RTL.
  • endвирівнює останній рядок до “кінця” рядка на основі directionтексту - праворуч для мов LTR, ліворуч для мов RTL.
  • autoза замовчуванням. Вирівнює останній рядок тексту відповідно до text-alignвластивості елемента , якщо він встановлений. Якщо він не встановлений, autoвирівнює текст до початку.
  • inheritзастосовує text-align-lastвластивість батьківського елемента.

Демо

Ця демонстрація показує різні text-align-lastзначення в дії. Примітка: Internet Explorer не підтримує значення startабо end.

Див. Pen text-align-last-last by CSS-Tricks (@ css-tricks) на CodePen.

Цікаві місця

В Internet Explorer text-align-lastпрацює лише тоді, коли text-alignдля решти тексту у вибраному елементі встановлено значення justify. Крім того, IE не розпізнає значення startабо endзначення.

У браузерах Mozilla text-align-lastпрацюватиме на останньому рядку перед вимушеним розривом рядка, навіть якщо в елементі не вказано вирівнювання для решти тексту.

Також варто знати, що text-align-lastвстановлює вирівнювання для всіх останніх рядків у вибраному елементі, а не лише для абсолютного останнього рядка тексту. Так, наприклад, якщо у вас є divп’ять абзаців, ваша text-align-lastдекларація застосовуватиметься до останнього рядка кожного з абзаців.

Якщо ви хочете використовувати text-align-lastлише останній рядок у контейнері, можливо, ви зможете використовувати :last-childабо :last-of-type. Ваш CSS виглядатиме приблизно так:

#center-only-last p:last-child ( -ms-text-align-last: center; -moz-text-align-last: center; text-align-last: center; )

У демонстраційній демонстрації нижче ліва сторона показує text-align-last: center;застосовану до div з кількома абзацами всередині неї. Зверніть увагу, що останній рядок кожного абзацу відцентрований. Права сторона показує text-align-last: center;застосовано лише до останнього абзацу всередині div за допомогою :last-child.

Див. Pen text-align-last-last by CSS-Tricks (@ css-tricks) на CodePen.

Пов’язані

  • вирівнювання тексту
  • текст-відступ

Більше інформації

  • text-align-last у текстовому модулі CSS рівень 3 (W3C)
  • text-align-last на MDN
  • text-align-last у MSDN
  • text-align-last в блозі команди веб-платформи Adobe
  • Помилка Webkit 76173 щодо реалізації Chrome text-align-last

Підтримка браузера

Chrome Сафарі Firefox Опера IE Android iOS
35+ із експериментальними прапорцями Ні 34+ (з префіксом) Ні 5,5+ (з префіксом) Ні Ні