CSS text decoration line
HTML5CSS.ru
ЛУЧШИЙ САЙТ ДЛЯ РАЗРАБОТЧИКОВ
❮ Назад Полный CSS Справочник Дальше ❯
Пример
Задайте различные типы линий для оформления текста:
div.a
{
text-decoration-line: overline;
}
div.b
{
text-decoration-line: underline;
}
div.c
{
text-decoration-line: line-through;
}
div.d
{
text-decoration-line: overline underline;
}
Определение и использование
Свойство text-decoration-line
задает тип оформления текста для использования (например, подчеркивание, перечеркивание, линия).
Совет: Кроме того, посмотрите на свойство Text-декорирование, которое представляет собой свойство с короткими руками для текста, декорирования строк, текста и декора, а также текст-украшение-цвет.
Примечание: Можно также объединять несколько значений, например, подчеркивание и перечеркивание, чтобы отображать линии как в тексте, так и под ним.
Значение по умолчанию: | none |
---|---|
Inherited: | no |
Animatable: | no. Читайте о animatable |
Version: | CSS3 |
Синтаксис JavaScript: | object.style.textDecorationLine=»overline» |
Поддержка браузера
Номера в таблице указывают первую версию браузера, которая полностью поддерживает свойство.
Номера следуют -МОЗ- укажет первую версию, которая работала с префиксом.
Свойство | |||||
---|---|---|---|---|---|
text-decoration-line | 57.0 | Не поддерживается | 36.0 6.0 -moz- | 7.1 -webkit- | 44.0 |
Синтаксис CSS
text-decoration-line: none|underline|overline|line-through|initial|inherit;
Значения свойств
Значение | Описание | |
---|---|---|
none | Значение по умолчанию. Не указана линия для оформления текста | |
underline | Указывает, что строка будет отображаться под текстом | |
overline | Указывает, что строка будет отображаться над текстом | |
line-through | Указывает, что строка будет отображаться через текст | |
initial | Присваивает этому свойству значение по умолчанию. (Читайте о initial) | |
inherit | Наследует это свойство из родительского элемента. (Читайте о inherit) |
Похожие страницы
CSS Справочник: CSS Text
HTML DOM Справочник: textDecorationLine Свойство
❮ Назад Полный CSS Справочник Дальше ❯
Популярное CSS
css текст
css картинки
как сделать css
цвета css
шрифты css
css стили
елементы css
фон css
кнопки css
таблица css
размер css
ссылки css
изображение css
выравнивание css
внешние отступы css
внутренние отступы css
списки css
css ширина
css при наведении
css формы
Copyright 2018-2020 HTML5CSS. ru
Правила и Условия Политика конфиденциальности О нас Контакты
CSS/Свойство text-decoration
Синтаксис
CSS 1
CSS 2‒2.2
CSS 3
text-decoration: none | [ underline || overline || line-through || blink ] | inherit
Описание
Свойство text-decoration
добавляет к тексту дополнительные элементы декора, такие как подчёркивание, зачёркивание текста, линия над текстом.
Применяется: | ко всем элементам; |
---|---|
Наследование: | отсутствует; |
Проценты: | не используются; |
Медиа: | визуальные. |
Примечание
В CSS 3 можно устанавливать дополнительно цвет и тип линии.
JavaScript
[объект]
Поддержка браузерами
Chrome
Поддерж. [1]
Firefox
Поддерж.[1]
Opera
Поддерж.[1]
Maxthon
Поддерж.[1]
IExplorer
Поддерж.[1]
Safari
Поддерж.[1]
iOS
Поддерж.
Android
Поддерж.[1]
[1] ‒ поддерживает синтаксис CSS 2-2.2.
Спецификация
CSS | Раздел | |
---|---|---|
1 | 5.4.3 ‘text-decoration’ | Перевод |
2 | 16.3.1 Underlining, overlining, striking, and blinking: the ‘text-decoration’ property | |
2.1 | 16.3.1 Underlining, overlining, striking, and blinking: the ‘text-decoration’ property | |
2.2 | 16. 3.1 Underlining, overlining, striking, and blinking: the ‘text-decoration’ property | |
3 | 2.4. Text Decoration Shorthand: the ‘text-decoration’ property |
Значения
- none
- Указывает на отсутствие элементов декора.
- underline
- Подчёркивает текст.
text-decoration: underline;
- overline
- Устанавливает линию над текстом.
text-decoration: overline;
- line-through
- Перечёркивает текст.
text-decoration: line-through;
- blink
- Создаёт мигающий текст. (Данное свойство не поддерживается большинством современных браузеров. )
- inherit
- Указывает, что элемент должен унаследовать параметры родительского элемента.
Начальное значение: «none
».
Пример использования
Листинг кода
<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>Свойство text-decoration</title>
</head>
<body>
<h2>Элементы декора</h2>
<p><span>Подчёркнутый текст</span>.</p>
<p><span>Надчёркнутый текст</span>.</p>
<p><span>Перечёркнутый текст</span>.</p>
<p><span>Мигающий текст</span>.</p>
</body>
</html>
Свойство text-decoration
Свойство CSS text-decorhhhhation-line
❮ Предыдущий Полное руководство по CSS Далее ❯
Пример
Установка различных типов линий оформления текста: дива
{
text-decoration-line: overline;
}
дел. б
{
text-decoration-line: подчеркивание;
}
дел.с
{
строка оформления текста: сквозная;
}
раздел д
{
text-decoration-line: надчеркивание, подчеркивание;
}
Попробуйте сами »
Определение и использование
Свойство text-decoration-line
задает используемый вид оформления текста
(например, подчеркивание, надчеркивание, зачеркивание).
Совет: Также обратите внимание на свойство text-decoration, которое является сокращенным свойством для text-decoration-line, text-decoration-style, text-decoration-color и text-decoration-толщина.
Примечание: Вы также можете комбинировать более одного значения, например, подчеркивание
Показать демо ❯
Значение по умолчанию: | нет |
---|---|
По наследству: | нет |
Анимация: | №. Читать о анимированном |
Версия: | CSS3 |
Синтаксис JavaScript: | объект .style.textDecorationLine=»overline» Попытайся |
Поддержка браузера
Числа в таблице указывают первую версию браузера, которая полностью поддерживает это свойство.
Числа, за которыми следует -moz- или -webkit-, указывают первую версию, которая работала с префиксом.
Собственность | |||||
---|---|---|---|---|---|
строка оформления текста | 57,0 | 79,0 | 36,0 6,0 -моз- | 12,1 7.1 -вебкит- | 44,0 |
Синтаксис CSS
text-decoration-line: нет|подчеркивание|надчеркивание|сквозь строку|начальный|наследовать;
Значения свойств
Значение | Описание | Играй |
---|---|---|
нет | Значение по умолчанию. Не указывает строку для оформления текста | Демонстрация ❯ |
подчеркивание | Указывает, что под текстом будет отображаться строка | Демонстрация ❯ |
над чертой | Указывает, что строка будет отображаться поверх текста | Демонстрация ❯ |
проходной | Указывает, что через текст будет отображаться строка | Демонстрация ❯ |
начальный | Устанавливает для этого свойства значение по умолчанию. Читать о начальный | |
унаследовать | Наследует это свойство от родительского элемента. Читать о унаследовать |
Связанные страницы
Учебник CSS: Оформление текста CSS
Ссылка HTML DOM: свойство textDecorationLine
❮ Предыдущая Полное руководство по CSS Следующий ❯
ВЫБОР ЦВЕТА
Лучшие учебники
Учебник HTMLУчебник CSS
Учебник JavaScript
How To Tutorial
Учебник SQL
Учебник Python
Учебник W3. CSS
Учебник Bootstrap
Учебник PHP
Учебник Java
Учебник C++
Учебник jQuery
900 Справочник
900
Справочник по HTML
Справочник по CSS
Справочник по JavaScript
Справочник по SQL
Справочник по Python
Справочник по W3.CSS
Справочник по Bootstrap
Справочник по PHP
Цвета HTML
Справочник по Java
Справочник по Angular
Справочник по jQuery
Основные примеры
Примеры HTMLПримеры CSS
Примеры JavaScript
Примеры инструкций
Примеры SQL
Примеры Python
Примеры W3.CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery
FORUM | О
W3Schools оптимизирован для обучения и обучения. Примеры могут быть упрощены для улучшения чтения и обучения. Учебники, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего содержания. Используя W3Schools, вы соглашаетесь прочитать и принять наши условия использования, куки-файлы и политика конфиденциальности.
Copyright 1999-2022 Refsnes Data. Все права защищены.
W3Schools работает на основе W3.CSS.
Невозможно использовать text-decoration: underline и text-decoration: line-through
Lightrun Answers был разработан, чтобы уменьшить постоянное гугление, связанное с отладкой сторонних библиотек. Он собирает ссылки на все места, на которые вы могли бы обратить внимание, выискивая опасную ошибку.
И, если вы все еще застряли в конце, мы будем рады ответить на звонок, чтобы узнать, как мы можем помочь.
См. исходный выпуск GitHub
Описание выпуска
Шаги для воспроизведения
- Посетите Quill js Playground
- Изменить HTML на
Мой тест
Ожидается выводМой тест
(true) - Изменить HTML на
Мой тест
Ожидается выводMy test
(false)
Ожидаемое поведение :
Стиль CSS text-decoration: подчеркивание
и text-decoration: сквозная строка
следует преобразовать
в HTML-теги
и
В настоящее время работает только вес шрифта: полужирный
и стиль шрифта: курсив
.
Фактическое поведение :
элемент, содержащий значения css text-decoration: underline
и text-decoration: line-through
не преобразуются, но игнорируются и удаляются.
Платформы : Протестировано в Google Chrome v73.0 Windows 10 x64
Версия : Протестировано на игровой площадке Quill js (v1.3.6)
Аналитика проблем
Результатов не найдено
Лучшие результаты из Интернета
Строка оформления текста через css не работает в Safari с …
Я нашел эту документацию, но Кажется, я не могу найти ничего другого о синтаксисе мобильного css для оформления строки через текст.
text-decoration — CSS: каскадные таблицы стилей — MDN Web Docs
Устанавливает тип используемого оформления, например, подчеркивание или зачеркивание. цвет оформления текста. Устанавливает цвет украшения.
украшение текста | CSS-Tricks
Свойство text-decoration добавляет подчеркивание, надчеркивание, сквозную линию или комбинацию строк к выделенному тексту.