CSS text-decoration-style — стиль лінії тексту

Властивість text-decoration-style визначає стиль декоративної лінії.

Використовується разом з text-decoration-line i text-decoration-color. Якщо властивість не задана, оздоблення буде у вигляді суцільної лінії.

Якщо зазначене оздоблення має певний семантичний зміст, наприклад, рядок, що означає, що деякий текст було видалено, рекомендується позначити це значення за допомогою тега HTML, наприклад <del> або <s>. Оскільки в деяких випадках браузери можуть відключити стиль, семантичне значення в такій ситуації не зникне.

правити

Загальний опис

правити

Нотатка

При одночасному налаштуванні декількох властивостей оздоблення рядка, можливо, буде зручніше скористатися властивістю text-decoration.

автор: Svitlana правити

+ додати пораду чи нотатку

Синтаксис

text-decoration-style: solid|double|dotted|dashed|wavy|initial|inherit;

Властивість text-decoration-style може отримувати 7 значень:

solid

Суцільна одинарна лінія. Без задання.

автор: Svitlana

правити

double

Подвійна лінія.

автор: Svitlana

правити

dotted

Лінія з точок.

автор: Svitlana

правити

dashed

Пунктирна лінія.

автор: Svitlana

правити

wavy

Хвиляста лінія.

автор: Svitlana

правити

initial

Встановлює властивість у значення без задання

автор: Svitlana

правити

inherit

Вказує на спадковість властивості від свого батьківського елемента.

автор: Svitlana

правити

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
	57	36	12.1	44	79	—

Підтримка: мобільні переглядачі

Переглядач
	57	57	36	12.2

Приклади

+ запропонувати свій приклад у пісочниці

<p>Хвилясте підкреслення цього рядка.</p>

p {
    text-decoration-line: underline;
    text-decoration-style: wavy;
}

<p class="s1">solid</p>
<p class="s2">double</p>
<p class="s3">dotted</p>
<p class="s4">dashed</p>
<p class="s5">wavy</p>

<p class="broken">стиль скинуто скороченням</p>
<p class="ok">стиль збережено</p>

p {
    margin: 0 0 6px;
    font: 20px sans-serif;
    text-decoration-line: underline;
    text-decoration-color: #0172ad;
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
}

.s1 { text-decoration-style: solid; }
.s2 { text-decoration-style: double; }
.s3 { text-decoration-style: dotted; }
.s4 { text-decoration-style: dashed; }
.s5 { text-decoration-style: wavy; }

.broken {
    margin-top: 20px;
    text-decoration-style: dashed;
    text-decoration: underline;
}

.ok {
    text-decoration: underline;
    text-decoration-style: dashed;
}

<p>Вибери потрібне значення для <code>text-decoration-style</code>:</p>

<select id="form">
  <option value="solid" name="value2" selected>solid</option>
  <option value="double" name="value2">double</option>
  <option value="dotted" name="value2">dotted</option>
  <option value="dashed" name="value2">dashed</option>
  <option value="wavy" name="value2">wavy</option>
</select>

<p id="text">Текст виводиться як зазвичай. За замовчуванням.</p>

<hr>

<p id="block">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa facilis, beatae ipsam qui quam vitae officiis commodi eius error non.
</p>

* {
  box-sizing: border-box;
  padding: 0;
}

body {
  text-align: center;
  font-family: monospace;
  font-size: 17px;
  line-height: 1.5;
  color: #222;
}


#form {
  padding: 8px 16px;
  font-size: 19px;
}

#block {
  margin: 75px auto 0 auto;
  background: gold;
  padding: 16px;
  font-size: 18px;
  color: #222;
  text-align: left;
  text-decoration-color: black;
  text-decoration: underline;
  text-decoration-style: solid;
}

#text {
  height: 150px;
  background-color: #eee;
  padding: 16px 0;
}

var block = document.getElementById('block');
var form = document.getElementById('form');
var text = document.getElementById('text');

var textArray = { 'solid': 'Суцільна одинарна лінія. Без задання.',
  'double': 'Подвійна лінія.',
  'dotted': 'Лінія з точок.',
  'dashed': 'Пунктирна лінія.',
  'wavy': 'Хвиляста лінія.' };

form.onchange = function change() {

  var newVal = getNewValue();
  block.style.textDecorationStyle = newVal;
  text.innerHTML = textArray[newVal];

};

function getNewValue() {

  var result = '';

  for (var i = 0; i < form.options.length; i++) {if (window.CP.shouldStopExecution(0)) break;
    if (form.options[i].selected == true) {
      result = form.options[i].value;
    }
  }window.CP.exitedLoop(0);

  return result;

}

<p class="text solid">This is text!</p>
<p class="text double">This is text!</p>
<p class="text dotted">This is text!</p>
<p class="text dashed">This is text!</p>
<p class="text wavy">This is text!</p>

.text {
	font-size: 40px;
	color: #444;
	text-decoration-color: red;
	text-decoration-line: underline;
}
.solid{
  	text-decoration-style: solid;
}
.double{
  	text-decoration-style: double;
}
.dotted{
  	text-decoration-style: dotted;
}
.dashed{
  	text-decoration-style: dashed;
}
.wavy{
  	text-decoration-style: wavy;
}