Перейти к основному содержанию
iotools.cloudiotools.cloud

Генератор text-decoration CSS

API reference

Создайте CSS text-decoration — подчёркивание, надчёркивание или зачёркивание сплошной, пунктирной, штриховой, двойной или волнистой линией, с произвольным цветом, толщиной и смещением — с живым предпросмотром, затем скопируйте CSS и HTML.

Ввод

Используется только для предпросмотра и HTML-фрагмента.

Расстояние между текстом и подчёркиванием (text-underline-offset).

Вывод

Здесь появится оформленный текст.

Объявление text-decoration
CSS
HTML
Это было полезно?

Другие способы использовать этот инструмент

REST API

curl -X POST https://api.iotools.cloud/v1/tool/css-text-decoration-generator \
  -H "Authorization: Bearer YOUR_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{}'

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

Спросите у ИИ-агента

Use the IOTools `css-text-decoration-generator` tool (CSS Text Decoration Generator) on this input:

YOUR_INPUT_HERE

Вставьте это любому агенту, подключённому к MCP-серверу IOTools, и добавьте свой ввод.

Виджет для встраивания

<iframe
  src="https://iotools.cloud/embed/css-text-decoration-generator/"
  width="100%" height="520" frameborder="0" scrolling="no" loading="lazy"
  title="Генератор text-decoration CSS — iotools.cloud"
  sandbox="allow-scripts allow-forms allow-same-origin allow-downloads allow-popups allow-popups-to-escape-sandbox"
  allow="clipboard-write"
  style="width:100%;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden"></iframe>
<script src="https://iotools.cloud/embed.js" async></script>

Вставьте это на свою страницу — бесплатно, без ключа, нужна лишь обратная ссылка.

Стоимость вызова API/MCPОт 5 кредитов
Нужно больше кредитов?Посмотреть тарифы

Также доступно через

ИнтеграцииРасширение для браузераРасширение для VS Code

Руководства

CSS-свойство text-decoration рисует линии на тексте: подчёркивания, надчёркивания и зачёркивания. Современный CSS позволяет также задавать стиль этой линии: сплошная, двойная, пунктирная, штриховая или волнистая, любой цвет и произвольная толщина. Этот генератор показывает результат на вашем собственном тексте и выдаёт CSS для копирования.

Как пользоваться

  1. Введите образец текста. Он используется только для предпросмотра и HTML-фрагмента.
  2. Выберите линии, которые нужны: подчёркивание, надчёркивание, зачёркивание или их комбинацию.
  3. Выберите стиль, цвет и толщину. Красная волнистая линия — знакомый вид «проверки орфографии»; пунктирная и штриховая хорошо подходят для ссылок и аббревиатур.
  4. Настройте смещение подчёркивания и обход выносных элементов. text-underline-offset отодвигает подчёркивание от текста, а text-decoration-skip-ink: auto заставляет линию обходить нижние выносные элементы, такие как g, j и y.
  5. Скопируйте результат: однострочное объявление, полное правило CSS и соответствующий HTML-фрагмент.

Что означает сокращение

text-decoration — это сокращение для text-decoration-line, text-decoration-style, text-decoration-color и text-decoration-thickness. Смещение и обход выносных элементов — отдельные свойства, поэтому в сгенерированное правило они включены отдельными строками.

Советы по доступности

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

Про тени и свечение текста см. Генератор текстовой тени CSS. Для букв с градиентной заливкой попробуйте Генератор градиентного текста CSS.

Конфиденциальность

Всё работает в вашем браузере. Ваш текст и настройки никогда не загружаются на сервер.

text decorationunderlinestrikethroughwavy underlineline-throughoverlinetext-underline-offsettypography

Нравятся инструменты? Уберите рекламу.

Один платёж навсегда убирает всю рекламу с вашего аккаунта. Без подписки, без слежки.

Убрать рекламу