Comment ajouter un soulignement en pointillé sous le texte HTML

Question 1

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.

Question 2

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>

Question 3

Utilisez les codes CSS suivants ...

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

Question 4

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>

Question 5

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>

Question 6

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;

Question 7

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

Question 8

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

border-bottom: 1px dotted #807f80;

Question 9

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.

Question 10

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

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

Answer 1

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

Answer 2

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

Answer 3

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

Cfreak

Answer 4

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

Answer 5

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

Answer 6

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

Answer 7

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

Alfred Xing

Answer 8

2

vous pouvez aussi essayer à la dottedplace dedashed

Brian Burns

Answer 9

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

Ahmet Can Güven

Answer 10

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

electroid

Answer 11

31

Utilisez les codes CSS suivants ...

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

Shakeel Ahmed
la 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

Answer 12

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

Answer 13

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

Answer 14

Merci Sos pour l'amélioration

Shakeel Ahmed

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

Answer 16

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>

Answer 17

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

Saeed Ahadian le

Answer 18

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;

Answer 19

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

Answer 20

0

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

border-bottom: 1px dotted #807f80;

Neel
la source

Answer 21

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.

Answer 22

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

Answer 23

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

Answer 24

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

Answer 25

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

Answer 26

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

Answer 27

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

Comment ajouter un soulignement en pointillé sous le texte HTML

Réponses: