Line through css: CSS — text-decoration — Tutorialspoint

Разное 

Содержание

Свойство text-decoration-line | CSS справочник

CSS свойства

Определение и применение

CSS свойство text-decoration-line определяет тип декоративной линии. В настоящее время свойство имеет ограниченную поддержку, используйте короткую запись (сокращенное свойство) — text-decoration.

Поддержка браузерами

CSS синтаксис:

text-decoration-line:"none | underline | overline | line-through | initial | inherit";

Допускается использование нескольких значений в одном объявлении:
text-decoration-line:"underline line-through overline";

JavaScript синтаксис:

object.style.textDecorationLine = "underline"

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

ЗначениеОписание
noneОпределяет нормальный текст (без декорирования). Это значение по умолчанию
underlineОпределяет линию под текстом.
overlineОпределяет линию над текстом.
line-throughОпределяет линию, проходящую через текст (перечеркивание).
initialУстанавливает свойство в значение по умолчанию.
inheritУказывает, что значение наследуется от родительского элемента.

Версия CSS

CSS3

Наследуется

Нет.

Анимируемое

Нет.

Пример использования

Обращаю Ваше внимание, что свойство имеет ограниченную поддержку браузерами.

<!DOCTYPE html>
<html>
<head>
<title>Пример использования свойства text-decoration-line.</title>
<style> 
.test {
font-size : 24px; /* устанавливаем размер шрифта */
-webkit-text-decoration-line : overline; /* добавляем декорирование текста - линия сверху (с префиксом производителя) */
-moz-text-decoration-line : overline; /* добавляем декорирование текста - линия сверху (с префиксом производителя) */
text-decoration-line : overline; /* добавляем декорирование текста - линия сверху */
}


  
.test2 {
font-size : 24px; /* устанавливаем размер шрифта */
-webkit-text-decoration-line : underline line-through; /* добавляем декорирование текста - линия снизу и линия, проходящая через текст (с префиксом производителя) */
-moz-text-decoration-line : underline line-through; /* добавляем декорирование текста - линия снизу и линия, проходящая через текст (с префиксом производителя) */
text-decoration-line : underline line-through; /* добавляем декорирование текста - линия снизу и линия, проходящая через текст */
}
</style>
</head>
	<body>
		<p class = "test">text-decoration-line: overline ;</p>
		<p class = "test2">text-decoration-line: underline line-through ;</p>
	</body>
</html>

Результат нашего примера:

Пример использования свойства text-decoration-line(определяет тип декоративной линии). CSS свойства

CSS text decoration line



Пример

Задайте различные типы линий для оформления текста:

div.a {
    text-decoration-line: overline;
}

div.b {

    text-decoration-line: underline;
}

div.c {
    text-decoration-line: line-through;
}

div.d {
    text-decoration-line: overline underline;
}

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

Свойство text-decoration-line задает тип оформления текста для использования (например, подчеркивание, перечеркивание, линия).

Совет: Кроме того, посмотрите на свойство Text-декорирование, которое представляет собой свойство с короткими руками для текста, декорирования строк, текста и декора, а также текст-украшение-цвет.

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

Значение по умолчанию:none
Inherited:no
Animatable:no. Читайте о animatable
Version:CSS3
Синтаксис JavaScript: object.style.textDecorationLine=»overline»

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

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

Номера следуют -МОЗ- укажет первую версию, которая работала с префиксом.

Свойство
text-decoration-line57.0Не поддерживается36.0
6.0 -moz-		7.1 -webkit-44.0

Синтаксис CSS

text-decoration-line: none|underline|overline|line-through|initial|inherit;

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

ЗначениеОписание
noneЗначение по умолчанию. Не указана линия для оформления текста
underlineУказывает, что строка будет отображаться под текстом
overlineУказывает, что строка будет отображаться над текстом
line-throughУказывает, что строка будет отображаться через текст
initialПрисваивает этому свойству значение по умолчанию. (Читайте о initial)
inheritНаследует это свойство из родительского элемента. (Читайте о inherit)

Похожие страницы

CSS Справочник: CSS Text

HTML DOM Справочник: textDecorationLine Свойство


Свойство text-decoration — оформление текста

Свойство text-decoration добавляет тексту различные эффекты: подчеркивание, перечеркивание, линию сверху.

Синтаксис

селектор { text-decoration: underline | line-through | overline | none; }

Значения

ЗначениеОписание
underlineДелает подчеркнутый текст.
line-throughДелает перечеркнутый текст.
overlineДелает линию над текстом.
none Отменяет подчеркивание подчеркнутого элемента. Чаще всего используется для ссылок, так как они по умолчанию подчеркнуты.

Значение по умолчанию: none. Для ссылок значение по умолчанию: underline.

Пример . Значение underline

<div> Lorem ipsum dolor sit amet. </div> #elem { text-decoration: underline; }

:

Пример . Значение line-through

<div> Lorem ipsum dolor sit amet. </div> #elem { text-decoration: line-through; }

:

Пример . Значение overline

<div> Lorem ipsum dolor sit amet. </div>

#elem { text-decoration: overline; }

:

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

  • свойство text-decoration-style,
    которое позволяет изменять тип линии
  • свойство text-decoration-color,
    которое позволяет изменять цвет линии
  • свойство text-decoration-line,
    которое позволяет изменять позицию линии

html — CSS — Подчеркивание, зачеркивание и наложение (со стилями и цветами) в одном элементе

html — CSS — Подчеркивание, зачеркивание и наложение (со стилями и цветами) в одном элементе — qaru

Присоединяйтесь к Stack Overflow , чтобы учиться, делиться знаниями и строить свою карьеру.

Спросил

Просмотрено 3к раз

Я хочу получить только один с тремя линиями (подчеркивание, зачеркивание и надстрочная линия), например: (Это только пример, я хочу изменить его динамически)


, но я не могу использовать несколько текст-декорации в одном элементе вот так:

  пролет {
    оформление текста: надстрочный зеленый пунктир;
    текст-оформление: сквозная волнистая бирюзовый цвет;
    оформление текста: двойное подчеркивание красным;
}

Как это сделать с помощью одного ? Может быть, я могу использовать :: after и :: before или другие языки, такие как SASS или LESS?
Спасибо за помощь.

Создан 29 авг.

Кацпер Г.

77055 серебряных знаков2828 бронзовых знаков

4

Используйте отображение : встроенный блок и с верхней границей и с нижней границей и с текстовым оформлением 

  пролет {
  дисплей: встроенный блок;
  граница сверху: пунктирная 1px # 000;
  нижняя граница: толстый двойной красный;
  текст-оформление: сквозная волнистая бирюзовый цвет;
}  
   Немного текста

За первый комментарий 

  пролет {
  дисплей: встроенный;
  текст-оформление: сквозная волнистая бирюзовый цвет;
  размер шрифта: 22px;
  положение: относительное;
}
span: after {
  позиция: абсолютная;
  content: «Немного текста»;
  слева: 0;
  верх: 0;
  текст-украшение: подчеркивание волнистым красным;
  z-индекс: -1;
  цвет белый;
}

span: before {
  позиция: абсолютная;
  content: «Немного текста»;
  слева: 0;
  верх: 0;
  текст-оформление: оверлайн волнистый черный;
  z-индекс: -1;
  цвет белый;
}  
   Немного текста

За последний комментарий 

  пролет {
  дисплей: встроенный;
  текст-оформление: сквозная волнистая бирюзовый цвет;
  размер шрифта: 22px;
  положение: относительное;
}
span: after {
  позиция: абсолютная;
  содержание: «S»;
  слева: 0;
  верх: -100%;
  текст-оформление: подчеркивание волнистым черным;
  z-индекс: -1;
  цвет белый;
  ширина: 100%;
  межбуквенный интервал: 1000 пикселей;
  переполнение: скрыто;
}

span: before {
  позиция: абсолютная;
  содержание: «S»;
  слева: 0;
  верх: 0;
  текст-украшение: подчеркивание волнистым красным;
  z-индекс: -1;
  цвет белый;
  ширина: 100%;
  межбуквенный интервал: 1000 пикселей;
  переполнение: скрыто;
}  
   Немного текста
Автор записи

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *