Текст-прикраса-рядок - CSS-хитрощі

Anonim

text-decoration-lineВластивість прикрашає текст з підкресленням, Оверлайн, лінійними наскрізними, або комбінацією цих ліній.

p ( text-decoration-line: underline; )

Цінності

  • none: жоден рядок не додається, а будь-які існуючі рядки видаляються - наприклад, noneвидаляється підкреслення за замовчуванням у посиланнях.
  • underline: додає підкреслене 1 піксель під текстом.
  • overline: додає верхній текст 1 піксель над текстом.
  • line-through: додає в тексті рядок розміром 1 піксель.
  • 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Значення не входить.

Дивіться рядок з текстовим оздобленням пера від 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.