Jak dodać kropkowane podkreślenie pod tekstem HTML

97

Jak podkreślić tekst html, aby wiersz pod tekstem był kropkowany, a nie standardowe podkreślenie? Najlepiej byłoby to zrobić bez używania oddzielnego pliku CSS. Jestem nowicjuszem w html.

html underline

— parap
źródło

13

Dlaczego nie możesz używać CSS? Może stwórz stronę jako jeden obraz i dodaj linię z mspaint?

— epascarello

Myślę, że nie da się tego zrobić bez CSS

— Cfreak

Musisz użyć css, ale można to zrobić za pomocą obrazów tła, najlepszym podejściem jest dolne obramowanie

— Kingdomcreation

4

Kolesie. Myślę, że powiedział „bez użycia oddzielnego pliku CSS”, a nie „bez CSS”. Czcij nowicjuszy.

— Stefan Reich

138

To niemożliwe bez CSS. W rzeczywistości <u>tag po prostu dodaje text-decoration:underlinedo tekstu za pomocą wbudowanego CSS przeglądarki.

Oto, co możesz zrobić:

<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>

— Alfred Xing
źródło

W swoim <head>elemencie dodaj <style>tag (zredagowałem moją odpowiedź)

— Alfred Xing

2

możesz też spróbować dottedzamiastdashed

— Brian Burns

Niezłe rozwiązanie i jest to możliwe. Nie rób mi kodu js;)

— Ahmet Can Güven.

Oto odpowiedź z obsługą tekstu wieloliniowego stackoverflow.com/a/4365458/1078641

— electroid

38

Użyj następujących kodów CSS ...

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

— Shakeel Ahmed
źródło

3

To powinna być akceptowana odpowiedź. Podążając za modelem prostokąta, za pomocą kropki borderzostanie umieszczony na zewnątrz, paddinga tym samym oddalony od tekstu.

— Ryan Walker

3

Istnieje krótka składnia: text-decoration: underline #000 dotted;gdzie pierwszy atrybut to linia, drugi to kolor, a trzeci to styl.

— Sos Sargsyan

Dzięki Sos za poprawę

— Shakeel Ahmed

15

Bez CSS w zasadzie utkniesz z użyciem tagu graficznego. Zasadniczo zrób obraz tekstu i dodaj podkreślenie. Zasadniczo oznacza to, że Twoja strona jest bezużyteczna dla czytnika ekranu.

Dzięki CSS jest to proste.

HTML:

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

CSS:

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

Przykład działania

Przykładowa strona

<!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>

— epascarello
źródło

10

Element HTML5 może dawać kropkowane podkreślenie, więc poniżej tekst będzie miał przerywaną linię zamiast zwykłego podkreślenia. Atrybut tytułu tworzy podpowiedź dla użytkownika, gdy najedzie kursorem na element:

UWAGA: Kropkowane obramowanie / podkreślenie jest domyślnie wyświetlane w przeglądarkach Firefox i Opera, ale IE8, Safari i Chrome wymagają linii CSS:

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

— Fatima Waheed
źródło

To jest poprawna odpowiedź. Krótkie i wolne od CSS. Dzięki.

— Saeed Ahadian

W przypadku HTML5 to naprawdę powinna być akceptowana odpowiedź.

— Perry

4

Jeśli treść ma więcej niż 1 linię, dodanie dolnej ramki nie pomoże. W takim przypadku będziesz musiał użyć,

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

Jeśli chcesz mieć więcej miejsca między tekstem a linią, po prostu użyj,

text-underline-position: under;

— Darshana Gunawardana
źródło

3

Sformatowano odpowiedź przez @epascarello :

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

<!DOCTYPE html>
<u class="dotted">I like cheese</u>

Rozwiń fragment

— anatoly techtonik
źródło

0

Możesz użyć obramowania na dole z dottedopcją.

border-bottom: 1px dotted #807f80;

— Neel
źródło

0

Możesz wypróbować tę metodę:

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

Należy pamiętać, że bez text-underline-position: under;Ciebie nadal będzie to kropkowane podkreślenie, ale ta właściwość zapewni mu więcej przestrzeni do oddychania.

Zakłada się, że chcesz osadzić wszystko w pliku HTML przy użyciu wbudowanych stylów i nie używać oddzielnego pliku lub tagu CSS.

— Mona Jalal
źródło

-2

Nie jest to niemożliwe bez CSS. Na przykład jako element listy:

<li style="border-bottom: 1px dashed"><!--content --></li>

— Davington III
źródło

6

Bez CSS to niemożliwe. styleAtrybut jest po prostu sposobem stosowania właściwości CSS bezpośrednio do elementu. Zobacz dokumentację MDN dotyczącą atrybutu stylu.

— mirichan

Dodanie CSS w ten sposób to sposób na efektywne myślenie o stylizacji html. Oczywiście można argumentować, że czegoś takiego nie ma, ale dla łatwej do opisania metody jest to możliwe rozwiązanie.

— Davington III

Jednak nadal jest to CSS, a prawdziwą preferencją było nie mieć osobnego pliku. Najlepszym sposobem rozwiązania problemu z tym ograniczeniem jest <style>. Style inline powinny być używane dość oszczędnie.

— mirichan

Cóż, w czasie, gdy tworzyłem ten post, było to spowodowane tym, że musiałem używać stylów wbudowanych. Wydawało się warte zachodu, aby zwrócić uwagę na tę możliwość innym imo tylko na wypadek, gdyby nie pomyśleli o tym, To naprawdę nie jest odpowiedni temat na wojnę i pokój ... Prawdopodobnie znaleźli to, czego potrzebowali, a nasze sugestie są dostępne dla tych i innych, którzy mogliby potrzebuję ich, kiedy piszę z pracy, nie biorę pod uwagę kogoś, kto wskazuje coś już oczywistego w sugestii, gdy jest to sugestia, a nie "musisz to zrobić w ten sposób", więc tak, weź pigułkę na chłód brachu :)

— Davington III

1

Mylisz moje zamiary. Poczyniłem techniczną obserwację dotyczącą zadanego pytania. Nie miałem zamiaru cię wzywać i przepraszam, że tak się stało.

— mirichan