Comment ajouter un soulignement en pointillé sous le texte HTML

96

Comment souligner le texte html pour que la ligne sous le texte soit en pointillé plutôt que le soulignement standard? De préférence, je voudrais faire cela sans utiliser de fichier CSS séparé. Je suis novice en html.

html underline

— parap
source

13

Pourquoi pourquoi ne pouvez-vous pas utiliser CSS? Peut-être créer la page comme une image et ajouter la ligne avec mspaint?

— epascarello

Je ne pense pas que cela puisse être fait sans CSS

— Cfreak

Vous devez utiliser le CSS, mais cela pourrait être fait en utilisant des images d'arrière-plan, la bordure inférieure est la meilleure approche

— Kingdomcreation

4

Des mecs. Je pense qu'il a dit "sans utiliser de fichier CSS séparé", pas "sans CSS". Adorez les débutants.

— Stefan Reich

138

C'est impossible sans CSS. En fait, la <u>balise ajoute simplement text-decoration:underlineau texte avec le CSS intégré du navigateur.

Voici ce que vous pouvez faire:

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

Dans votre <head>élément, ajoutez une <style>balise (j'ai modifié ma réponse)

— Alfred Xing

2

vous pouvez aussi essayer à la dottedplace dedashed

— Brian Burns

Belle solution et c'est possible. Don't make me code js for it;)

— Ahmet Can Güven

Voici la réponse avec le support de texte multi-lignes stackoverflow.com/a/4365458/1078641

— electroid

31

Utilisez les codes CSS suivants ...

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

— Shakeel Ahmed
source

3

Cela devrait être la réponse acceptée. Suivant le modèle de la boîte, l'utilisation d'un pointillé bordersera placé à l'extérieur paddinget sera donc éloigné du texte.

— Ryan Walker

2

Il existe une syntaxe courte: text-decoration: underline #000 dotted;où le premier attribut est la ligne, le second est la couleur et le troisième est le style.

— Sos Sargsyan

Merci Sos pour l'amélioration

— Shakeel Ahmed

15

Sans CSS, vous êtes fondamentalement coincé avec l'utilisation d'une balise d'image. Fondamentalement, créez une image du texte et ajoutez le soulignement. Cela signifie essentiellement que votre page est inutile pour un lecteur d'écran.

Avec CSS, c'est simple.

HTML:

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

CSS:

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

Exemple d'exécution

Exemple de page

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

9

L'élément HTML5 peut donner un soulignement en pointillé afin que le texte en dessous ait une ligne en pointillé plutôt qu'un soulignement normal. Et l'attribut title crée une info-bulle pour l'utilisateur lorsqu'il passe son curseur sur l'élément:

REMARQUE: La bordure / soulignement en pointillé est affiché par défaut dans Firefox et Opera, mais IE8, Safari et Chrome ont besoin d'une ligne de CSS:

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

— Fatima Waheed
source

C'est la bonne réponse. Court et sans CSS. Merci.

— Saeed Ahadian le

4

Si le contenu comporte plus d'une ligne, l'ajout d'une bordure inférieure n'aidera pas. Dans ce cas, vous devrez utiliser,

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

Si vous voulez plus d'espace entre le texte et la ligne, utilisez simplement,

text-underline-position: under;

— Darshana Gunawardana
source

3

Reformaté la réponse par @epascarello :

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

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

Développer l'extrait

— anatoly techtonik
source

0

Vous pouvez utiliser la bordure inférieure avec l' dottedoption.

border-bottom: 1px dotted #807f80;

— Neel
source

0

Vous pouvez essayer cette méthode:

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

Veuillez noter que sans text-underline-position: under; vous aurez toujours un trait de soulignement en pointillé, mais cette propriété lui donnera plus d'espace pour respirer.

Cela suppose que vous souhaitiez tout incorporer dans un fichier HTML en utilisant un style en ligne et ne pas utiliser un fichier CSS ou une balise distincte.

— Mona Jalal
source

-2

Ce n'est pas impossible sans CSS. Par exemple en tant qu'élément de liste:

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

— Davington III
source

6

C'est impossible sans CSS. L' styleattribut est simplement un moyen d'appliquer des propriétés CSS directement à un élément. Consultez la documentation MDN sur l'attribut style.

— mirichan

Ajouter du CSS de cette manière est un moyen de penser efficacement au style html. Bien sûr, vous pouvez affirmer que cela n'existe pas, mais pour une méthode facile à décrire, c'est une solution possible.

— Davington III

C'est toujours du CSS, et la vraie préférence donnée était de ne pas avoir de fichier séparé. La meilleure façon de résoudre le problème avec cette restriction est <style>. Les styles en ligne doivent être utilisés avec parcimonie.

— mirichan

Eh bien, au moment où j'ai créé ce message, c'était parce que je devais utiliser des styles en ligne. Cela a semblé intéressant de noter que la possibilité pour d'autres imo juste au cas où ils n'auraient peut-être pas pensé à cela, ce n'est pas vraiment un sujet approprié pour la guerre et la paix ... Ils ont probablement trouvé ce dont ils avaient besoin et nos suggestions sont là pour ceux et tous les autres qui pourraient besoin d'eux, quand je poste du travail, je ne prends pas en compte quelqu'un qui souligne quelque chose de déjà évident à propos de la suggestion quand c'est une suggestion pas un "vous devez le faire de cette façon" alors oui, prenez une pilule

— froide

1

Vous vous méprenez sur mes intentions. Je faisais une observation technique pertinente à la question posée. Je n'avais pas l'intention de vous appeler et je m'excuse pour cela.

— mirichan