Как добавить пунктирное подчеркивание под HTML-текстом

97

Как вы подчеркиваете html-текст, чтобы линия под текстом была пунктирной, а не стандартным подчеркиванием? Желательно, чтобы это было сделано без использования отдельного файла CSS. Я новичок в html.

html underline парап
источник
13
Почему почему нельзя использовать CSS? Может быть, создать страницу как одно изображение и добавить строку с помощью mspaint?
epascarello 06
Я не думаю, что это можно сделать без CSS
Cfreak
Вы должны использовать css, но это можно сделать с помощью фоновых изображений, нижняя граница - лучший подход
Kingdomcreation
4
Чуваки. Я думаю, он сказал «без использования отдельного файла CSS», а не «без CSS». Поклоняйтесь новичкам.
Стефан Райх

Ответы:

138

Без CSS это невозможно. Фактически, <u>тег просто добавляется text-decoration:underlineк тексту с помощью встроенного в браузер CSS.

Вот что вы можете сделать:

<html>
<head>
<!-- Other head stuff here, like title or meta -->

<style type="text/css">
u {    
    border-bottom: 1px dotted #000;
    text-decoration: none;
}
</style>
</head>
<!-- Body, content here -->
</html>
Альфред Син
источник
В свой <head>элемент добавьте <style>тег (я отредактировал свой ответ)
Альфред Син
2
вы также можете попробовать dottedвместоdashed
Брайан Бернс
Хорошее решение, и это возможно. Не заставляйте меня кодировать js для этого;)
Ахмет Джан Гювен
Вот ответ с поддержкой многострочного текста stackoverflow.com/a/4365458/1078641
electroid
39

Используйте следующие коды CSS ...

text-decoration:underline;
text-decoration-style: dotted;
Шакил Ахмед
источник
3
Это должен быть принятый ответ. Следуя блочной модели, пунктирная линия borderбудет размещена за пределами paddingтекста и, следовательно, будет удалена от него.
Райан Уокер,
3
Существует короткий синтаксис: text-decoration: underline #000 dotted;где первый атрибут - линия, второй - цвет, а третий - стиль.
Сос Саргсян
Спасибо Сосу за улучшение
Шакил Ахмед
15

Без CSS вы в основном застряли с использованием тега изображения. В основном сделайте изображение текста и добавьте подчеркивание. По сути, это означает, что ваша страница бесполезна для программы чтения с экрана.

С CSS это просто.

HTML:

<u class="dotted">I like cheese</u>

CSS:

u.dotted{
  border-bottom: 1px dashed #999;
  text-decoration: none; 
}

Пример выполнения

Пример страницы

<!DOCTYPE HTML>
<html>
<head>
    <style>
        u.dotted{
          border-bottom: 1px dashed #999;
          text-decoration: none; 
        }
    </style>
</head>
<body>
    <u class="dotted">I like cheese</u>
</body>
</html>
Епаскарелло
источник
10

В элементе HTML5 может быть пунктирное подчеркивание, поэтому нижний текст будет иметь пунктирную линию, а не обычное подчеркивание. А атрибут title создает всплывающую подсказку для пользователя, когда он наводит курсор на элемент:

ПРИМЕЧАНИЕ . Пунктирная граница / подчеркивание по умолчанию отображается в Firefox и Opera, но IE8, Safari и Chrome нуждаются в строке CSS:

<abbr title="Hyper Text Markup Language">HTML</abbr>
Фатима Вахид
источник
Это правильный ответ. Коротко и без CSS. Спасибо.
Саид Ахадиан,
С HTML5 это действительно должен быть принятый ответ.
Перри
4

Если в контенте больше одной строки, добавление нижней границы не поможет. В этом случае вам придется использовать,

text-decoration: underline;
text-decoration-style: dotted;

Если вам нужно больше места между текстом и строкой, просто используйте,

text-underline-position: under;
Даршана Гунавардана
источник
3

Отформатировал ответ @epascarello :

u.dotted {
  border-bottom: 1px dashed #999;
  text-decoration: none;
}
<!DOCTYPE html>
<u class="dotted">I like cheese</u>
Развернуть фрагмент

анатолий техтоник
источник
0

Вы можете использовать нижнюю границу с dottedопцией.

border-bottom: 1px dotted #807f80;
Neel
источник
0

Вы можете попробовать этот метод:

<h2 style="text-decoration: underline; text-underline-position: under; text-decoration-style: dotted">Hello World!</h2>

Обратите внимание, что без text-underline-position: under;вас все равно будет пунктирная линия подчеркивания, но это свойство даст ему больше места для передышки.

Предполагается, что вы хотите встроить все в файл HTML с помощью встроенного стиля, а не использовать отдельный файл или тег CSS.

Мона Джалал
источник
-2

Это не невозможно без CSS. Например, как элемент списка:

<li style="border-bottom: 1px dashed"><!--content --></li>
Давингтон III
источник
6
Без CSS это невозможно. styleАтрибут просто способ применения свойств CSS непосредственно к элементу. См. Документацию MDN по атрибуту стиля.
mirichan 01
Добавление CSS таким образом - это способ эффективно подумать о стилях HTML. Конечно, вы можете возразить, что такой вещи не существует, но для простоты описания метода это возможное решение.
Дэвингтон III
Однако это все еще CSS, и в действительности предпочтение было отдано не иметь отдельного файла. Лучший способ решить проблему с этим ограничением - это <style>. Встроенные стили следует использовать довольно экономно.
mirichan
В то время, когда я создавал этот пост, это было связано с тем, что мне пришлось использовать встроенные стили. Казалось целесообразным отметить эту возможность для других, я просто на случай, если они не подумали об этом. Это не совсем подходящая тема для войны и мира ... Они, по-видимому, нашли то, что им нужно, и наши предложения есть для тех и любых других, которые могут они нужны, когда я пишу с работы, я не принимаю во внимание кого-то, кто указывает на что-то уже очевидное в предложении, когда это предложение, а не «ты должен сделать это так», так что да, прими таблетку для охлаждения, братан :)
Дэвингтон III
1
Вы ошибаетесь в моих намерениях. Я сделал техническое наблюдение, относящееся к заданному вопросу. У меня не было намерения вызывать вас, и я прошу прощения за то, что наткнулся на это.
mirichan