Jak dodać kropkowane podkreślenie pod tekstem HTML

Question 1

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.

Question 2

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>

Question 3

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

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

Question 4

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>

Question 5

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>

Question 6

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;

Question 7

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

Question 8

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

border-bottom: 1px dotted #807f80;

Question 9

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.

Question 10

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

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

Answer 1

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

Answer 2

13

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

epascarello

Answer 3

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

Cfreak

Answer 4

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

Kingdomcreation

Answer 5

4

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

Stefan Reich

Answer 6

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

Answer 7

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

Alfred Xing

Answer 8

2

możesz też spróbować dottedzamiastdashed

Brian Burns

Answer 9

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

Ahmet Can Güven.

Answer 10

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

electroid

Answer 11

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

Answer 12

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

Answer 13

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

Answer 14

Dzięki Sos za poprawę

Shakeel Ahmed

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

Answer 16

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

Answer 17

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

Saeed Ahadian

Answer 18

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

Perry

Answer 19

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;

Answer 20

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

Answer 21

0

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

border-bottom: 1px dotted #807f80;

Neel
źródło

Answer 22

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.

Answer 23

-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

Answer 24

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

Answer 25

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

Answer 26

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

Answer 27

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

Answer 28

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

Jak dodać kropkowane podkreślenie pod tekstem HTML

Odpowiedzi: