Текст-декорация-ред - CSS-трикове

Anonim

В text-decoration-lineимота украсява текст с подчертаване, Номера, линия през, или комбинация от тези линии.

p ( text-decoration-line: underline; )

Стойности

  • none: не се добавя ред и всички съществуващи редове се премахват - например noneпремахва подчертаването по подразбиране на връзките.
  • underline: добавя подчертаване 1px под текста.
  • overline: добавя надпис 1px над текста.
  • line-through: добавя 1px ред през текста.
  • inherit: наследява декорацията на родителя.

Стойността blinkе в спецификацията на W3C, но е оттеглена и няма да работи в нито един текущ браузър. Когато заработи, той накара текста да изглежда „мигащ“, като бързо го превключва между 0% и 100% непрозрачност.

Комбиниране на ценности

Можете да комбинирате underline, overlineили line-throughстойности в списък с пространството, разделени да се добавят няколко декоративни линии:

p ( text-decoration-line: overline underline line-through; )

Употреба

В text-decoration-lineимота е на практика идентичен с оригиналния text-decorationимота. Ако всичко, което искате да направите, е да добавите ред или редове към текста си, text-decorationе по-добър избор, защото той се поддържа от всеки браузър, дори много стари. Като цяло, използването на text-decoration-lineдекларация има смисъл само когато пишете правило за дългосрочен стил, което включва text-decoration-styleили text-decoration-colorдекларация. Ако искате да използвате и трите заедно, можете да използвате стенографското text-decorationсвойство.

Стенография

text-decoration-lineможе да се използва в комбинация със text-decoration-styleи text-decoration-colorв съкратеното text-decorationсвойство CSS3 (в момента само Firefox напълно поддържа това):

.underlined ( text-decoration: underline dotted red; )

Демонстрация

Тази демонстрация ще работи в Safari, Firefox и Chrome с активирани експериментални функции на уеб платформата. На blinkстойност не е включена.

Вижте реда за текстова декорация на Pen от CSS-Tricks (@ css-tricks) на CodePen.

Свързани

  • текст-декорация
  • стил на декорация на текст
  • текст-декорация-цвят
  • текст-декорация-пропускане

Повече информация

  • text-decoration-line в спецификацията на W3C
  • text-decoration-line на MDN

Поддръжка на браузър

Chrome Сафари Firefox Опера IE Android iOS
31 * † 7,1 * 6 ‡ Нито един Нито един Нито един 8 *

* с -webkitпрефикс
† с активиран флаг за експериментални функции на уеб платформа
‡ 6 - 35 с -mozпрефикс, без префикс към 36.