Come aggiungere una sottolineatura tratteggiata sotto il testo HTML

96

Come si sottolinea il testo html in modo che la linea sotto il testo sia tratteggiata anziché la sottolineatura standard? Preferibilmente, vorrei farlo senza utilizzare un file CSS separato. Sono un principiante in html.

html underline

— parap
fonte

13

Perché perché non puoi usare i CSS? Forse creare la pagina come un'immagine e aggiungere la linea con mspaint?

— epascarello

Non credo che si possa fare senza CSS

— Cfreak

Devi usare CSS, ma potrebbe essere fatto usando immagini di sfondo, il bordo inferiore è l'approccio migliore

— kingdomcreation

4

Dudes. Penso che abbia detto "senza usare un file CSS separato", non "senza CSS". Adorate i neofiti.

— Stefan Reich,

138

È impossibile senza CSS. In effetti, il <u>tag viene semplicemente aggiunto text-decoration:underlineal testo con il CSS integrato nel browser.

Ecco cosa puoi fare:

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

Nel tuo <head>elemento, aggiungi un <style>tag (ho modificato la mia risposta)

— Alfred Xing

2

puoi anche provare al dottedposto didashed

— Brian Burns

Bella soluzione ed è possibile. Non farmi codice js per questo;)

— Ahmet Can Güven

Ecco la risposta con il supporto del testo su più righe stackoverflow.com/a/4365458/1078641

— electroid

32

Utilizza i seguenti codici CSS ...

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

— Shakeel Ahmed
fonte

3

Questa dovrebbe essere la risposta accettata. Seguendo il box model, utilizzando un tratteggiato borderverrà posizionato all'esterno paddinge sarà quindi distante dal testo.

— Ryan Walker,

2

C'è una sintassi breve: text-decoration: underline #000 dotted;dove il primo attributo è la linea, il secondo è il colore e il terzo è lo stile.

— Sos Sargsyan

Grazie Sos per il miglioramento

— Shakeel Ahmed

15

Senza CSS, fondamentalmente sei bloccato con l'utilizzo di un tag immagine. Fondamentalmente crea un'immagine del testo e aggiungi la sottolineatura. Ciò significa fondamentalmente che la tua pagina è inutile per uno screen reader.

Con i CSS è semplice.

HTML:

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

CSS:

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

Esempio di esecuzione

Pagina di esempio

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

10

L'elemento HTML5 può fornire una sottolineatura punteggiata in modo che il testo sottostante abbia una linea tratteggiata anziché una sottolineatura regolare. E l'attributo title crea un suggerimento per l'utente quando passa il cursore sull'elemento:

NOTA: il bordo tratteggiato / sottolineato viene visualizzato per impostazione predefinita in Firefox e Opera, ma IE8, Safari e Chrome richiedono una riga di CSS:

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

— Fatima Waheed
fonte

Questa è la risposta corretta. Breve e privo di CSS. Grazie.

— Saeed Ahadian il

Con HTML5 questa dovrebbe essere davvero la risposta accettata.

— perry

4

Se il contenuto ha più di una riga, l'aggiunta di un bordo inferiore non aiuta. In tal caso dovrai usare,

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

Se vuoi più spazio per respirare tra il testo e la riga, usa semplicemente,

text-underline-position: under;

— Darshana Gunawardana
fonte

3

Riformattata la risposta di @epascarello :

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

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

Espandi lo snippet

— anatoly techtonik
fonte

0

Puoi usare il bordo inferiore con l' dottedopzione.

border-bottom: 1px dotted #807f80;

— Neel
fonte

0

Puoi provare questo metodo:

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

Tieni presente che senza di text-underline-position: under;te avrai ancora una sottolineatura tratteggiata ma questa proprietà gli darà più spazio per respirare.

Questo presuppone che tu voglia incorporare tutto all'interno di un file HTML usando lo stile inline e non usare un file CSS o tag separato.

— Mona Jalal
fonte

-2

Non è impossibile senza CSS. Ad esempio come elemento di un elenco:

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

— Davington III
fonte

6

È impossibile senza CSS. L' styleattributo è semplicemente un modo per applicare le proprietà CSS direttamente a un elemento. Consulta i documenti MDN sull'attributo style.

— mirichan

Aggiungere CSS in questo modo è un modo per pensare efficacemente allo stile html. Ovviamente puoi sostenere che non esiste una cosa del genere, ma per un metodo facile da descrivere questa è una possibile soluzione.

— Davington III

Tuttavia è ancora CSS, e la vera preferenza data era quella di non avere un file separato. Il modo migliore per risolvere il problema con tale restrizione è <style>. Gli stili in linea dovrebbero essere usati con parsimonia.

— mirichan

Ebbene, al momento in cui ho creato quel post era perché dovevo usare gli stili inline. È sembrato che valesse la pena di notare quella possibilità agli altri nel caso in cui non ci avessero pensato, non è davvero un argomento appropriato per la guerra e la pace ... Presumibilmente hanno trovato ciò di cui avevano bisogno ei nostri suggerimenti sono lì per quelli e tutti gli altri che potrebbero ne ho bisogno, quando posto dal lavoro non prendo in considerazione qualcuno che fa notare qualcosa di già ovvio sul suggerimento quando è un suggerimento non un "devi farlo in questo modo" quindi sì prendi una pillola fredda fratello :)

— Davington III

1

Sbagli le mie intenzioni. Stavo facendo un'osservazione tecnica pertinente alla domanda posta. Non avevo intenzione di chiamarti e mi scuso per averlo fatto in quel modo.

— mirichan