Як додати пунктирне підкреслення під текст HTML

96

Як підкреслити HTML-текст, щоб рядок під текстом був пунктирним, а не стандартним підкресленням? Бажано, щоб я хотів зробити це, не використовуючи окремий файл CSS. Я новачок у html.

html underline

— парап
джерело

13

Чому ви не можете використовувати CSS? Можливо, створити сторінку як одне зображення та додати рядок за допомогою mspaint?

— epascarello

Я не думаю, що це можна зробити без CSS

— Cfreak

Ви повинні використовувати css, але це можна було зробити, використовуючи фонові зображення, найкращим підходом є

— межове дно

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

31

Використовуйте наступні коди CSS ...

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

— Шейкл Ахмед
джерело

3

Це має бути прийнятою відповіддю. За моделлю коробки, використовуючи пунктир, borderбуде розміщено зовні paddingі, таким чином, буде віддалено від тексту.

— Райан Уокер,

2

Існує короткий синтаксис: 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>

— епаскарелло
джерело

9

Елемент HTML5 може давати пунктирне підкреслення, тому під текстом буде пунктирний рядок, а не звичайне підкреслення. Атрибут title створює підказку для користувача, коли він наводить курсор на елемент:

ПРИМІТКА . Пунктирна межа / підкреслення за замовчуванням відображається у Firefox та Opera, але для IE8, Safari та Chrome потрібен рядок CSS:

<abbr title="Hyper Text Markup Language">HTML</abbr>

— Фатіма Вахід
джерело

Це правильна відповідь. Короткий і без CSS. Дякую.

— Саїд Ахадіан,

4

Якщо вміст має більше 1 рядка, додавання нижньої межі не допоможе. У цьому випадку вам доведеться використовувати,

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;

— Ніл
джерело

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 щодо атрибуту style.

— mirichan

Додавання CSS таким чином - це спосіб ефективно продумати стиль HTML. Звичайно, ви можете заперечити, що такого немає, але для простого для опису методу це можливе рішення.

— Davington III

Це все-таки CSS, і справжньою перевагою було не мати окремого файлу. Найкращий спосіб вирішити проблему з цим обмеженням - це <style>. Вбудовані стилі слід використовувати досить економно.

— mirichan

Ну тоді, коли я створював цю публікацію, це було тому, що мені доводилося використовувати вбудовані стилі. Здавалося, варто зазначити таку можливість іншим, просто якщо вони, можливо, не думали про це. Це насправді не є відповідною темою для війни та миру ... Вони, мабуть, знайшли те, що їм потрібно, і наші пропозиції є для тих та інших, які могли б вони потрібні мені, коли я публікую допис з роботи, я не беру до уваги, що хтось вказує на щось очевидне щодо пропозиції, коли це пропозиція, а не "ти повинен робити це таким чином", так що,

— прийми

1

Ви помиляєтесь у моїх намірах. Я робив технічне спостереження, що стосується поставленого питання. Я не мав наміру закликати вас, і прошу вибачення за те, що це потрапило таким чином.

— mirichan