Как перечеркнуть текст в html

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

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

Через html теги <s> , <strike> и <del>
Через свойство CSS text-decoration

1. Зачеркнутый текст через html теги <s>, <strike> и <del>

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

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

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

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

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

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

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

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

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

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

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

<s>: The Strikethrough element

The <s> HTML element renders text with a strikethrough, or a line through it. Use the <s> element to represent things that are no longer relevant or no longer accurate. However, <s> is not appropriate when indicating document edits; for that, use the <del> and <ins> elements, as appropriate.

Try it

Content categories	Phrasing content, flow content.
Permitted content	Phrasing content.
Tag omission	None, both the starting and ending tag are mandatory.
Permitted parents	Any element that accepts phrasing content.
Implicit ARIA role	No corresponding role
Permitted ARIA roles	Any
DOM interface	HTMLElement

Attributes

This element only includes the global attributes.

Examples

Result

Accessibility concerns

The presence of the s element is not announced by most screen reading technology in its default configuration. It can be made to be announced by using the CSS content property, along with the ::before and ::after pseudo-elements.

Some people who use screen readers deliberately disable announcing content that creates extra verbosity. Because of this, it is important to not abuse this technique and only apply it in situations where not knowing content has been struck out would adversely affect understanding.

Текст в HTML

HTML – Это язык разметки , мы познакомились как написать первую страницу — html , рассмотрели структуру html – страницы , узнали как можно подключить таблицы стилей – css , разделить страницу на блоки , сейчас можно перейти к изучению основных тегов – html , с помощью которых можно форматировать html – страницу , отдельные символы , целые блоки .

С помощью html – тегов можно отформатировать текст в html – страницы , визуально теги не отображаются на странице , мы видим только текст . И чтобы выделить текст полужирным или курсивным начертанием . Можно выделить часть текста или целый блок другим цветом , приходится использовать специальные теги , которые помогают нам это сделать . Каждый тег играет свою роль . Рассмотрим основные теги которые часто могут применяться для форматирования текста.

Полужирный текст в HTML

Тег и тег – Парные теги , с помощью этих тегов текст можно выделить полужирным шрифтом , подчеркнуть важность текста .

Приоритет имеет парный тег .

Полужирный текст

Наклонный текст в HTML

Тег и тег – Парные теги , выделяет текст наклоном (курсивом) .

Наклонный текст

Подчеркнутый текст в HTML

Тег – Парный тег , отображает текст подчеркнутым.

Подчеркнутый текст

Перечеркнутый текст в HTML

Тег – Парный тег , отображает текст подчеркнутым.

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

Текст меньшего размера в HTML

Парный тег – помогает сделать текст меньшего размера .

Текст меньшего размера

Создание нижних и верхних индексов

Парный тег сдвигает текст ниже уровня строки и делает текст меньше основного текста .

Парный тег сдвигает текст выше уровня строки и делает текст меньше основного текста .

Создание нижних и верхних индексов

Скрытый текст тег — <details>

<details> Элемент представляет собой виджет раскрытия , из которого пользователь может получить дополнительную информацию или элементы управления. По умолчанию содержимое элемента не отображается, для изменения статуса применяется атрибут open .

Тег <details> используется для хранения информации, которую можно скрыть или показать по требованию пользователя.

Рассмотрим несколько примеров с использование этого тега при написание html – страниц с подключением стилей css .

Текст скрыт при загрузке страницы

Текст открыт при загрузке страницы

С тегом <details> можно использовать атрибут open , данный логический атрибут указывает , пользователю , что при загрузке html – страницы текст будет открыт . По умолчанию установлено значение false , поэтому дополнительная информация будет скрыта.

Текст открыт при загрузке страницы

Тег <details> в рамке

Рассмотрим пример с подключение стилей css , чтобы тексту придать более лучший вид .

Тег <details> в рамке

Тег details в рамке

Зачеркнутый текст HTML

В среде HTML зачеркнутый текст возможно прописать при помощи тегов и таблиц стилей CSS.

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

Для более точной настройки визуализации контента лучшим будет применение свойств CSS, которые выполняются при назначении к элементу.

Зачеркнутый текст при помощи тегов

Первым тегом, применяющимся для зачеркивания текста, является strike. Аналог — тег s, который имеет сокращенную форму написания, как: u (подчеркнутый), i (курсив), b (выделенный). Использование тегов s и strike для зачеркивания текста не одобряется со спецификаций HTML 4, а в HTML 5 их применение вообще запрещено.

Зачеркнутый текст с использованием тегов s и strike

На их смену ввели тег del, который выделяет текст как удаленный, что по семантике более правильно. В отображении различий между тегами нет.

Зачеркнутый текст с использованием тега del

Перечеркнутый текст с применением CSS

Оформить зачеркнутый текст возможно при использовании стилей CSS. Для этого применяется свойство text-decoration. При использовании необходимых атрибутов возможно не только выводить перечеркнутый текст, но и подчеркнутый сверху, снизу или мигающий. Если необходимо отобразить несколько линий, значения необходимо вводить через пробел.

Значения

line-through — линия зачеркивает слово
underline — линия подчеркивает слово
overline — линия накрывает слово
blink — задает мигание текста (1 раз в секунду)
inherit — значение берется от родительского атрибута
none — производит отмену всех эффектов, также и подчеркивание ссылок

При необходимости возможно поменять вид линии. Используется свойство text-decoration-style с приведенными ниже атрибутами.

Атрибут	Значение	Пример
solid	одинарная	слово
wavy	волнистая	слово
double	двойная	слово
dashed	пунктирная	слово
dotted	точечная	слово

Изменение цвета линии

Есть возможность сделать линию определенного цвета с применением свойства text-decoration-color.

Пример текста, зачеркнутого оранжевой линией

Задав цвет линии тегу del, возможно задать цвет текста вложенному тегу span.

Пример задания нужного цвета тексту и линии

Использовав псевдоэлемент :before можно установить нужную толщину линии, ее положение и цвет. При этом текст должен быть без переносов.

Зачеркнутый текст при помощи псевдо элемента before

При этом появляется возможность расположения линии за текстом.

Зачеркнутый текст сзади с помощью псевдоэлемента before

Выводы

Использование стилей CSS предоставляет наиболее полную визуализацию для отображения контента в HTML. С созданием библиотеки стилей CSS появляется возможность задавать определенные стили для вложений, классов, id. При создании документа необходимо всего-лишь правильно указать стиль для выбранного элемента. Это ускоряет работу и минимизирует повторения в коде, что отражается как на валидации, его длине, так и на визуальном восприятии.