So fügen Sie eine gepunktete Unterstreichung unter HTML-Text hinzu

95

Wie unterstreichen Sie HTML-Text, sodass die Linie unter dem Text gepunktet ist und nicht die Standard-Unterstreichung? Am liebsten möchte ich dies ohne Verwendung einer separaten CSS-Datei tun. Ich bin ein Anfänger bei HTML.

html underline parap
quelle
13
Warum können Sie CSS nicht verwenden? Vielleicht die Seite als ein Bild erstellen und die Zeile mit mspaint hinzufügen?
Epascarello
Ich glaube nicht, dass es ohne CSS geht
Cfreak
Sie müssen CSS verwenden, aber es könnte mit Hintergrundbildern gemacht werden, Rand unten ist der beste Ansatz
Kingdomcreation
4
Kerle. Ich denke, er sagte "ohne Verwendung einer separaten CSS-Datei", nicht "ohne CSS". Bete die Neulinge an.
Stefan Reich

Antworten:

137

Ohne CSS ist das nicht möglich. Tatsächlich <u>fügt das Tag einfach hinzutext-decoration:underline dem Text das integrierte CSS des Browsers hinzu.

Folgendes können Sie tun:

<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
quelle
Fügen Sie in Ihrem <head>Element a hinzu<style> Tag hinzu (ich habe meine Antwort bearbeitet)
Alfred Xing
2
Sie können auch versuchen, dottedanstattdashed
Brian Burns
Schöne Lösung und es ist möglich. Lass mich nicht js dafür codieren;)
Ahmet Can Güven
Hier ist die Antwort mit Multi - Line - Text - Unterstützung stackoverflow.com/a/4365458/1078641
Electroid
29

Verwenden Sie die folgenden CSS-Codes ...

text-decoration:underline;
text-decoration-style: dotted;
Shakeel Ahmed
quelle
3
Dies sollte die akzeptierte Antwort sein. Nach dem Box-Modell wird die Verwendung eines Punkts borderaußerhalb des paddingTextes platziert und ist somit vom Text entfernt.
Ryan Walker
2
Es gibt eine kurze Syntax: text-decoration: underline #000 dotted;Dabei ist das erste Attribut Linie, das zweite Farbe und das dritte Stil.
Sos Sargsyan
Danke Sos für die Verbesserung
Shakeel Ahmed
15

Ohne CSS müssen Sie im Grunde genommen kein Image-Tag verwenden. Machen Sie im Grunde ein Bild des Textes und fügen Sie die Unterstreichung hinzu. Das bedeutet im Grunde, dass Ihre Seite für einen Bildschirmleser unbrauchbar ist.

Mit CSS ist es einfach.

HTML:

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

CSS:

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

Laufendes Beispiel

Beispielseite

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

Das HTML5-Element kann eine gepunktete Unterstreichung geben, sodass der darunter liegende Text eine gepunktete Linie anstelle einer regulären Unterstreichung aufweist. Das title-Attribut erstellt einen Tooltip für den Benutzer, wenn er den Mauszeiger über das Element bewegt:

HINWEIS: Der gepunktete Rand / die gepunktete Unterstreichung wird in Firefox und Opera standardmäßig angezeigt, IE8, Safari und Chrome benötigen jedoch eine CSS-Zeile:

<abbr title="Hyper Text Markup Language">HTML</abbr>
Fatima Waheed
quelle
Dies ist die richtige Antwort. Kurz und CSS-frei. Vielen Dank.
Saeed Ahadian
4

Wenn der Inhalt mehr als eine Zeile enthält, hilft das Hinzufügen eines unteren Rahmens nicht. In diesem Fall müssen Sie verwenden,

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

Wenn Sie mehr Luft zwischen dem Text und der Zeile haben möchten, verwenden Sie einfach:

text-underline-position: under;
Darshana Gunawardana
quelle
3

Die Antwort von @epascarello wurde neu formatiert :

u.dotted {
  border-bottom: 1px dashed #999;
  text-decoration: none;
}
<!DOCTYPE html>
<u class="dotted">I like cheese</u>
Erweitern Sie das Snippet

anatoly techtonik
quelle
0

Sie können den unteren Rand mit dottedOption verwenden.

border-bottom: 1px dotted #807f80;
Neel
quelle
0

Sie können diese Methode ausprobieren:

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

Bitte beachten Sie, dass ohne text-underline-position: under;Sie immer noch eine gepunktete Unterstreichung vorhanden ist, diese Eigenschaft jedoch mehr Raum zum Atmen bietet.

Dies setzt voraus, dass Sie alles mithilfe des Inline-Stils in eine HTML-Datei einbetten und keine separate CSS-Datei oder ein separates CSS-Tag verwenden möchten.

Mona Jalal
quelle
-2

Ohne CSS ist das nicht unmöglich. Zum Beispiel als Listenelement:

<li style="border-bottom: 1px dashed"><!--content --></li>
Davington III
quelle
6
Ohne CSS ist das nicht möglich. Das styleAttribut ist einfach eine Möglichkeit, CSS-Eigenschaften direkt auf ein Element anzuwenden. Weitere Informationen finden Sie in den MDN-Dokumenten zum Stilattribut .
Mirichan
Das Hinzufügen von CSS auf diese Weise ist eine Möglichkeit, effektiv über das HTML-Styling nachzudenken. Natürlich kann man argumentieren, dass es so etwas nicht gibt, aber für eine einfach zu beschreibende Methode ist dies eine mögliche Lösung.
Davington III
Es ist jedoch immer noch CSS, und die eigentliche Präferenz war, keine separate Datei zu haben. Der beste Weg, um das Problem mit dieser Einschränkung zu lösen, ist <style>. Inline-Stile sollten ziemlich sparsam verwendet werden.
Mirichan
Zu der Zeit, als ich diesen Beitrag erstellt habe, war es, weil ich Inline-Stile verwenden musste. Es schien sich zu lohnen, diese Möglichkeit für andere zu erwähnen, nur für den Fall, dass sie nicht daran gedacht haben. Es ist nicht wirklich ein angemessenes Thema für Krieg und Frieden ... Sie haben vermutlich gefunden, was sie brauchten, und unsere Vorschläge sind für diejenigen und alle anderen da, die dies könnten brauche sie, wenn ich von der Arbeit poste, berücksichtige ich nicht jemanden, der auf etwas hinweist, das bereits offensichtlich ist, wenn es sich um einen Vorschlag handelt, nicht um ein "Du musst es so machen", also nimm ja eine Chill-Pille, Bruder :)
Davington III
1
Sie verwechseln meine Absichten. Ich machte eine technische Beobachtung, die für die gestellte Frage relevant war. Ich hatte nicht die Absicht, Sie anzurufen, und ich entschuldige mich dafür, dass es so rüberkommt.
Mirichan