Как сделать текст зачеркнутым css
Перейти к содержимому

Как сделать текст зачеркнутым css

  • автор:

Свойство text-decoration, подчёркивание и другие эффекты

Дополнительное оформление текста можно задать с помощью свойства text-decoration . Вот его значения:

  1. underline — подчёркивание;
  2. line-through — зачёркивание;
  3. overline — надчёркивание;
  4. none — убирает вышеперечисленные эффекты.

К тексту можно одновременно применить несколько эффектов, если перечислить значения через пробел:

p < text-decoration: underline; /* подчёркнутый текст */ >span < /* подчёркнутый и зачёркнутый текст */ text-decoration: underline line-through; >

Свойство text-decoration — составное, а это значит, что его можно разложить на следующие свойства:

  • text-decoration-line — вид линии: зачёркивание, подчёркивание или надчёркивание;
  • text-decoration-style — стиль линии, может принимать значения:
    • solid — сплошная линия;
    • double — двойная линия;
    • dotted — точечная линия;
    • dashed — пунктирная линия;
    • wavy — волнистая линия.

    Перейти к заданию

    • index.html Сплит-режим
    • style.css Сплит-режим

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

    Вопрос до боли банален. Надо сделать кусок текста перечеркнутый.
    Однако никакие манипуляции с селекторами и инлайновыми стилями не помогают.

    Вот место где надо цену 4990 зачеркнуть — joxi.ru/ZrJ4b41U1a8eP2

    • Вопрос задан более трёх лет назад
    • 4697 просмотров

    Комментировать
    Решения вопроса 2
    text-decoration: line-through #000 !important; цвета не хватало
    Ответ написан более трёх лет назад
    Комментировать
    Нравится Комментировать

    SDmitriyS

    Javascript разработчик
    text-decoration: line-through solid red !important;
    Ответ написан более трёх лет назад
    Комментировать
    Нравится Комментировать
    Ответы на вопрос 4

    zkelo

    .price

    Ответ написан более трёх лет назад
    Комментировать
    Нравится 1 Комментировать

    gobananas

    finishhim.ru
    Вам именно через CSS? Можно с помощью HTML

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

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

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

    Ответ написан более трёх лет назад
    Комментировать
    Нравится Комментировать

    Через before или after в блоке с ценой, при этом указав position relative для блока
    :before z-index:5;
    position: absolute;
    top: 50%;
    left: 0;
    content: »,
    width: 100px;
    height: 1px;
    background: white;
    >

    Ответ написан более трёх лет назад
    Комментировать
    Нравится Комментировать
    Дмитрий Акулич @DmitriiAl Автор вопроса
    начинающий верстальщик

    теги не помогли, через псевдоэлемент можно, но возникали траблы при адаптации когда получался перенос символов.

    помогло — text-decoration: line-through solid red !important; — про цвет в подобном месте я вообще никогда ранее не задумывался.

    Ответ написан более трёх лет назад
    Комментировать
    Нравится Комментировать
    Ваш ответ на вопрос

    Войдите, чтобы написать ответ

    html

    • HTML
    • +1 ещё

    Дробит бекграунд при использовании margin?

    • 1 подписчик
    • час назад
    • 23 просмотра

    Как сделать текст зачеркнутым css

    В связи с переходом на новый движок. возможны сбои в работе! Простите!
    Работы производятся прямо сейчас 19-02-2024! ��

    Зачеркнутый текст html с помощью тега

    Для того, чтобы зачеркнуть текст нам понадобится тег

    Отдельно я уже писал о теге .

    У нас есть какой то текст, который надо зачеркнуть.

    Пусть это будет текст, который надо зачеркнуть в html.

    Берем данный тег

    Оборачиваем данный текст в тег:

    Пусть это будет текст, который надо зачеркнуть в html.

    Результат вывода зачеркнутого текста в html/

    Пусть это будет текст, который надо зачеркнуть в html.

    Как видим, наш текст прекрасно зачеркнулся!

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

    Теперь возьмем второй тег , который также зачеркивает текст.

    Проделаем абсолютно те же операции, что в выше идущем пункте:

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

    Здесь второй текст, который будем зачеркивать вторым тегом

    Берем второй тег

    Опять оборачиваем наш текст тегом:

    Здесь второй текст, который будем зачеркивать вторым тегом

    Результат вывода зачеркнутого текста в html/

    Здесь второй текст, который будем зачеркивать вторым тегом

    Как видим, наш текст прекрасно зачеркнулся, и никакой разницы между первым зачеркнутым вторым зачеркнутым текстом нет!

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

    Мы дошли до третьего тега , который тоже может зачеркивать текст.

    Повторяем пройденное выше:

    Для зачеркивания текста нам нужен текст:

    Здесь третий текст, который будем зачеркивать третьим тегом

    Берем третий тег

    Опять оборачиваем наш текст тегом:

    Здесь третий текст, который будем зачеркивать третьим тегом

    Результат вывода зачеркнутого текста в html

    Здесь третий текст, который будем зачеркивать третьим тегом

    Результат предсказуемый! Текст сделался перечеркнутым!

    Свойство css для зачеркивания текста

    В этот раз, не будем использовать теги:

    Нам понадобится свойство r d .

    И не забываем про «3 способа css», для примера используем данное свойство и значение прямо в теге:

    И да мы забыли про текст:

    Текст номер 4, который будем зачеркивать с помощью css

    Соберем весь код вместе:

    Текст номер 4, который будем зачеркивать с помощью css
    Результат: Текст номер 4, который будем зачеркивать с помощью css Вывод:

    Что следовало и ожидать — текст прекрасно зачеркнут!

    Разница между зачеркнуть и перечеркнуть текст html.

    На самом деле — эти два слова, зачеркнуть и перечеркнуть имеют один и тот же смысл.

    Какая разница между зачеркнуть и перечеркнуть html!?

    Для нас главная разница, по какому из запросов приходят больше или меньше!

    Начнем с меньшего!

    html перечеркнутый 281

    перечеркнутый текст html 243

    html тег перечеркнутый текст 22

    +как сделать текст перечеркнутым html 11

    html код перечеркнутый текст 7

    Итого : получается, что количество запросов в месяц, где встречается слово «перечеркнутый» — 564 запросов в месяц.

    Теперь словосочетание зачеркнутый html

    зачеркнутый html 656

    зачеркнутый текст html 549

    html тег зачеркнутый текст 39

    зачеркнутый тег +в html 20

    +как сделать зачеркнутый текст +в html 18

    html зачеркнуть слово 17

    зачеркнутый шрифт html 16

    html код зачеркнутый текст 15

    зачеркнутый текст html css 9

    html зачеркнутая цена 7

    Итого получается, что количество запросов в месяц, где встречается слово «зачеркнутый» — 1346 запросов в месяц.

    Не стесняемся говорить спасибо!

    ruweb

    Все статьи авторские, при копироавании активная ссылка обязательна DwWeb.ru!
    © 2015 — 2024 Контакты. Реклама на сайте
    Лучший хостинг : RUWEB + помощь по RUWEB

    Как сделать текст зачеркнутым css

    Тег отображает текст как перечеркнутый. Этот тег аналогичен тегу , но в отличие от него имеет сокращенную форму записи подобно тегам , и . Взамен этого тега рекомендуется использовать стили.

    Синтаксис

    Текст

    Закрывающий тег

    Атрибуты

    Аналог CSS

    Валидация

    Использование этого тега осуждается спецификацией HTML4, валидный код получается только при использовании переходного .

    HTML5 IE Cr Op Sa Fx

       Тег S 

    Список должников

    Чебурашка

    Крокодил Гена

    Шапокляк

    Результат примера показан на рис. 1.

    Рис. 1

    Рис. 1. Вид текста, оформленного с помощью тега

    Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.

    Типы тегов

    HTML5

    Блочные элементы

    Строчные элементы

    Универсальные элементы

    Нестандартные теги

    Осуждаемые теги

    Видео

    Документ

    Звук

    Изображения

    Объекты

    Скрипты

    Списки

    Ссылки

    Таблицы

    Текст

    Форматирование

    Формы

    Фреймы

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

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