Поскольку текст CSS подчеркивает только сплошную линию, и ее позиция находится прямо внизу строк, я использую border-bottom плюс небольшое дополнение для достижения точечного или пунктирного текста.
h2{border-bottom:1px dotted #999; padding-bottom:5px;}
теперь проблема заключается в том, что текст заголовка (или абзаца или любого другого) принимает две строки или более, точечная подчеркивание просто делает то, что делает каждая граница, которая остается в нижней части элемента блока. Если я использую стиль text-underline, подчеркивание остается с текстом, но text-underline поддерживает только сплошную линию, и, насколько мне известно, отступов нет.
Итак, как мне отображать многострочные тексты с пунктирным или пунктирным подчеркиванием?
Спасибо
h2 {
border-bottom: 1px dashed #999;
display: inline;
}
Итак, вы получаете то, что вам нужно.
Но вы должны иметь в виду, что <h2> тогда (конечно) больше не является блочным элементом. Но вы можете "избегать" этого, положив <h2> в <div>.
"бит" поздно, но способ с текстом-украшением-стилем и текстом-украшением-линией, чтобы настроить подчеркивание в некоторых браузерах.
-moz-text-decoration-line: underline;
-moz-text-decoration-style: dashed;
Я также сталкивался с аналогичной проблемой, но с <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>