Html подчеркивание: Как подчеркнуть слово в html

Примечание: Результаты в разных браузерах могут отличаться. Поддержка данного модуля по-прежнему ограничена, поэтому примеры в этом посте могут отображаться некорректно в зависимости от используемого вами браузера.

Свойство text-decoration

Свойство text-decoration раньше поддерживало только значения none, underline, overline и line-through, но сейчас оно становится сокращением для новых свойств text-decoration-color, text-decoration-style и text-decoration-line и поддерживает их значения. Например, вот цветное двойное подчеркивание:

.fancy {
  -webkit-text-decoration: hotpink double underline;
  text-decoration: hotpink double underline;
}

В результате получится:

Fancy Underline

Свойство text-decoration-color

Это свойство наконец-то дает нам возможность изменить цвет оформления текста!

text-decoration-style

Свойство text-decoration-style используется для определения типа оформления текста, а новые инструкции содержат два значения: double и wavy:

. wavy {
  text-decoration: underline;
  -webkit-text-decoration-color: salmon;
  text-decoration-color: salmon;
  -webkit-text-decoration-style: wavy;
  text-decoration-style: wavy;
}

Wavy Decoration

Свойство text-decoration-line

Свойство text-decoration-line принимает значения underline, overline, line-through и blink (однако blink считается устаревшим):

.strike {
  -webkit-text-decoration-color: red;
  text-decoration-color: red;
  -webkit-text-decoration-line: line-through;
  text-decoration-line: line-through;
}

Вы получите:

Strike This

Свойство text-decoration-skip

С помощью свойства text-decoration-skip мы можем сделать так, чтобы оформление текста не выходило за рамки элемента, к которому оно применяется. Возможные значения: objects, spaces, ink, edges и box-decoration.

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

. ink {
  -webkit-text-decoration: darkturquoise solid underline;
  text-decoration: darkturquoise solid underline;
  -webkit-text-decoration-skip: ink;
  text-decoration-skip: ink;
}

Вы получите:

Hippopotamus

Значение objects пропускает оформление элементов, которые имеют отображение встроенного блока.

<p>
  Getting <span>Very</span> Fancy
</p>

.super {
  -webkit-text-decoration: peru solid overline;
  text-decoration: peru solid overline;
  -webkit-text-decoration-skip: objects;
  text-decoration-skip: objects;
}

В результате будет:

Getting Very Fancy

Остальные значения пока плохо поддерживаются браузерами, а именно:

• spaces: оформление не касается пробелов и знаков препинания.
• edges: создает зазор, если два элемента с текстовым оформлением находятся рядом друг с другом.
• box-decoration: оформление пропускает любое унаследованное поле, отступ или границу.

text-underline-position

Свойство text-underline-position – еще один способ управлять позиционированием оформления текста по отношению к глифам. Возможные значения: auto, under, left и right.

При начальном значении auto браузеры обычно размещают оформление близко к базовой линии текста:

 .auto {
  -webkit-text-decoration: slateblue solid underline;
  text-decoration: slateblue solid underline;
  -webkit-text-underline-position: auto;
  text-underline-position: auto;
}

Что выглядит так:

Hippopotamus

… и теперь обратите внимание, как с значение under перемещает оформление текста под выносные элементы:

.under {
  -webkit-text-decoration: slateblue solid underline;
  text-decoration: slateblue solid underline;
  -webkit-text-underline-position: under;
  text-underline-position: under;
}

Hippopotamus

Значения left и right для text-underline-position используются для управления оформлением текста в режимах вертикального письма.

Продолжайте изучать оформление текста в CSS самостоятельно и попробуйте создать какой-нибудь причудливый стиль.

Can I Use text-decoration? сообщает, что 94% браузеров по всему миру хотя бы частично поддерживают это свойство.

Читайте также: Настройка полосы прокрутки с помощью CSS

css — Как убрать подчеркивание ссылок в электронной почте в формате HTML?

спросил 11 лет, 2 месяца назад

Изменено 1 месяц назад

Просмотрено 126 тысяч раз

 
    ЗАБРОНИРОВАТЬ СЕЙЧАС
    

 

Я использовал этот код, чтобы сделать ссылку в своем электронном письме в формате HTML. В браузерах и Outlook это работает хорошо, но в GMail, Hotmail и ymail ссылки отображаются подчеркнутыми.

Может ли кто-нибудь помочь мне избавиться от этого?

• html
• css
• html-электронная почта
• информационный бюллетень
• почтовый клиент

8

 ЗАБРОНИРОВАТЬ
 

Outlook удалит стиль с !important Тег оставляет обычный стиль, поэтому без подчеркивания. Тег !important будет преобладать над стилем веб-клиентов электронной почты по умолчанию, не оставляя подчеркивания.

2

Я вижу, что на это ответили; однако я считаю, что эта ссылка предоставляет соответствующую информацию о том, какое форматирование поддерживается в различных почтовых клиентах.

CSS

Стоит отметить, что GMail и Outlook являются двумя наиболее требовательными форматами электронной почты в формате HTML.

1

После полдня изучения этого (и 2 лет с момента открытия этого вопроса) я считаю, что нашел исчерпывающий ответ на этот вопрос.

 Ссылка
 

(Вам нужно свойство text-underline для промежутка внутри ссылки и тег шрифта, чтобы изменить цвет)

3

Использовать !важно в правиле оформления текста.

 ЗАБРОНИРОВАТЬ
 

2

Почта Windows, казалось, полностью игнорировала встроенный тег text-decoration , но для меня это исправилось, добавив это в заголовок:

1

Еще один способ обмануть Gmail (для телефонных номеров): использовать ~ вместо —

404-835-9421 —> 404~835~9421

Это сэкономит вам (или менее опытным пользователям 😉 путешествие по html-полосе.

Я нашел еще один способ удалить ссылки в Outlook, который я тестировал до сих пор. если вы создадите пустой класс, например, в своем css, скажите .blank {}, а затем выполните следующие действия со своими ссылками, например:

 Поиск
 

это сработало для меня, надеюсь, это поможет кому-то, у кого все еще возникают проблемы с удалением подчеркивания ссылок в Outlook. Если у кого-то есть обходной путь для gmail, пожалуйста, не могли бы вы мне помочь, перепробовал все в этой теме, ничего не работает.

Спасибо

Я думаю, что если вы поместите стиль span после тега с text-decoration:none , он будет работать в большинстве браузеров/почтовых клиентов.

Например:

 
    БАНАНЫ

 

2

Я добавил оба объявления в href, которые работали в приложениях Outlook и Gmail. Outlook игнорирует !important, а gmail нуждается в нем. Веб-версии электронной почты работают и с тем, и с другим.

 text-decoration: нет !important; текстовое оформление: нет;
 

Чтобы полностью «скрыть» подчеркивание для как в почтовом приложении, так и в веб-браузере, можно сделать следующий хитрый способ.

 

    КНОПКА

 

1. Цвет в 1-м — это тот, который вам не нужен, ДОЛЖЕН установить такой же цвет, как ваш фоновый цвет. (красный здесь)

2. Цвет во 2-м — это цвет для текста вашей кнопки. (белый здесь)

0

Текстовое оформление none у меня не работало, затем я нашел электронное письмо в Outlook, в котором не было строки, и проверил код:

 
www.test.com

 

Этот у меня работает.

Я использовал комбинацию скрытия ссылок в Google, добавления ссылок для mso (outlook) и тега shy, чтобы сохранить внешний вид моей компании. Некоторый код может быть избыточным (для моей компании внешний вид важнее, чем интерактивная часть (это было похоже на головоломку, поскольку каждое изменение тормозит что-то еще)

 <тд>

www­.­immothekerfinotheker­.­be


 

Надеюсь, это кому-нибудь поможет

Все почтовые клиенты корректируют код HTML и CSS, который вы предоставляете свои правила:

например: gmail удаляет все, кроме внутреннего HTML тега body.

1. для большинства других клиентов вы можете иметь тег стиля в заголовке