Многострочный пунктирный или пунктирный текст-подчеркивание

Поскольку текст CSS подчеркивает только сплошную линию, и ее позиция находится прямо внизу строк, я использую border-bottom плюс небольшое дополнение для достижения точечного или пунктирного текста.

h2{border-bottom:1px dotted #999; padding-bottom:5px;}

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

Итак, как мне отображать многострочные тексты с пунктирным или пунктирным подчеркиванием?

Спасибо

Ответ 1

h2 {
  border-bottom: 1px dashed #999;
  display: inline;
}

Итак, вы получаете то, что вам нужно.
Но вы должны иметь в виду, что <h2> тогда (конечно) больше не является блочным элементом. Но вы можете "избегать" этого, положив <h2> в <div>.

Ответ 2

"бит" поздно, но способ с текстом-украшением-стилем и текстом-украшением-линией, чтобы настроить подчеркивание в некоторых браузерах.

-moz-text-decoration-line: underline;
-moz-text-decoration-style: dashed;

Ответ 3

Я также сталкивался с аналогичной проблемой, но с <a> теги. В моем случае это свойство css float, которое заставляло границу появляться только под последней строкой. Поэтому я включил <a> теги с <span> теги и перемещение css float: left to <span> . Он исправил проблему, теперь нижняя граница появляется под всеми строками всякий раз, когда длинная ссылка завершается, чтобы соответствовать содержащему div.

Пересмотренный стиль CSS и структура HTML:

  a { border-bottom:1px dotted red; }
  span.nav-link { float:left; }

<span class="nav-link"><a href="some-page">Test link</a></span>