Как сделать перечеркнутый текст html css

Зачеркнутый текст на сайте через CSS и теги html

Рассмотрим все способы как можно сделать зачеркнутый текст через html и CSS. Существует два варианта реализации:

• Через html теги , и
• Через свойство CSS text-decoration

1. Зачеркнутый текст через html теги , и

Весь текст заключенные в html теги , и становится зачеркнутым. Необычная буква s произошло в сокращение от английского слова «strike».

Разница между всеми тремя тегами визуально отсутствуют. Однако последний вариант с использованием html тега считается более предпочтительным, поскольку он поддерживается в стандарте HTML5. Другие теги не поддерживаются (они конечно будут отображаться корректно, но валидацию не пройдут).

p>Обычный шрифт. s>Зачеркнутый текст через тег s/s>/p> p>Обычный текст. strike>Зачеркнутый текст через тег strike/strike>/p> p>Обычный текст. del>Зачеркнутый текст через тег del/del>/p>

Преобразуется на странице в

Обычный шрифт. Зачеркнутый текст через тег s

Обычный текст. Зачеркнутый текст через тег strike

Обычный текст. Зачеркнутый текст через тег del

2. Зачеркнутый текст через свойство CSS text-decoration

В CSS есть свойство text-decoration, которое отвечает за подчеркивание текста.

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

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

• none — текст без оформления
• underline — нижнее подчеркивание
• overline — верхнее подчеркивание
• line-through — зачеркивание текста
• blink — мерцающий текст (рекомендуется не применять это значение)

Нас интересует значение line-through , которое задает зачеркивание текста.

html> head> style> .del< text-decoration: line-through; > /style> /head> body> div class css">del">Текст со свойством text-decoration: line-through/div> /body> /html>

Преобразуется на странице в

text-decoration

Добавляет оформление текста в виде его подчеркивания, перечеркивания, линии над текстом и мигания. Одновременно можно применить более одного стиля, перечисляя значения через пробел.

Синтаксис

text-decoration: [ blink || line-through || overline || underline ] | none | inherit

Значения

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

HTML5 CSS2.1 IE Cr Op Sa Fx

       
Стратегическое нападение
  

Объектная модель

[window.]document.getElementById(» elementID «).style.textDecoration

[window.]document.getElementById(» elementID «).style.textDecorationBlink

[window.]document.getElementById(» elementID «).style.textDecorationLineThrough

[window.]document.getElementById(» elementID «).style.textDecorationNone

[window.]document.getElementById(» elementID «).style.textDecorationOverLine

[window.]document.getElementById( «elementID «).style.textDecorationUnderline

Браузеры

Internet Explorer до версии 7.0 включительно не поддерживает значение inherit . Линия полученная с помощью значения line-through в IE7 располагается выше, чем в других браузерах; в IE8 эта ошибка исправлена.

CSS по теме

Подчеркивание, зачеркивание текста в CSS: свойство text-decoration

Используя свойство CSS text-decoration, можно добавлять дополнительные эффекты для текста, такие как подчеркивание, зачеркивание, мигание. Ниже приведена таблица с допустимыми значениями и их описанием.

Значение	Что делает
underline	Нижнее подчеркивание текста
overline	Верхнее подчеркивание текста
line-through	Зачеркивание текста
blink	Мигание текста
none	Удаление всех эффектов
inherit	Наследование значений родителя

Пример записи стиля:

Применяя свойство text-decoration в CSS, следует соблюдать чувство меры и некоторые рекомендации. Перед использованием значения underline не для гиперссылки убедитесь, что текст на веб-странице не будет на нее похож. Многие пользователи воспринимают подчеркнутый текст как ссылку. Чтобы более гибко настроить стиль и иметь возможность изменять толщину, вид и цвет полосы подчеркивания, можно использовать свойство border (подробнее о нем мы будем говорить чуть позже).

Если вы желаете убрать стандартное подчеркивание гиперссылки в браузере, воспользуйтесь значением none .

Значение blink (мигание текста) хоть и внесено в таблицу, на данный момент не поддерживается браузерами.

Скриншот с примерами использования стиля:

Далее в учебнике: установка тени для текста при помощи свойства CSS text-shadow.

Перечёркнутый текст

С помощью CSS свойства text-decoration-color , который задаёт цвет линии (не поддерживается в Internet Explorer и Edge).

Перечёркнутый текст

Также можно изменить стиль линии с помощью text-decoration-style .

Значение	Описание	Пример
text-decoration-style: solid;	Одинарная линия	Текст
text-decoration-style: double;	Двойная линия	Текст
text-decoration-style: dotted;	Точечная линия	Текст
text-decoration-style: dashed;	Пунктирная линия	Текст
text-decoration-style: wavy;	Волнистая линия	Текст

Второй способ

Тегу задается цвет линии, вложенному цвет текста.

 Текст зачёркнут красной линией 

del < color: red; text-decoration: line-through; >del span

Третий способ

Линия добавляется псевдо элементом :before , но у текста не должно быть переносов.

Перечёркнутый текст

del < position: relative; color: #000; text-decoration: none; >del:before

При такой реализации, можно расположить линию за текстом.

del < position: relative; color: #000; text-decoration: none; >del:before

21.08.2019, обновлено 30.08.2019
Предыдущая запись Ведущие нули у ol
Следующая запись Перечёркивание текста по диагонали

Комментарии

Авторизуйтесь, чтобы добавить комментарий.

Другие публикации

Ниже приведён список MIME-заголовков и расширений файлов.

Сборник горизонтальных линий с тегом hr разных видов и стилей.

Вопрос генерации QR-кодов в PHP достаточно освещён, есть много библиотек, одной из них является «PHP QR Code» – быстрый и легкий класс, рассмотрим его применение совместно с графической библиотекой.