Как добавить пунктирное подчеркивание под 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