linea interrotta da testo

**scartus** · 26-04-2016, 22:26

Salve, vorrei semplicemente avere una linea orizzontale interrotta da qualche parola nel mezzo.

------------- Testo Qui ----------------

Una cosa simile, ma una riga continua e anche elaborata magari.

Grazie a tutti!

**vitren54** · 26-04-2016, 23:03

Ciao

potresti provare a mettere un'immagine con una linea prima e dopo il testo.

Aspetta comunque risposte più professionali.

**Vincent.Zeno** · 26-04-2016, 23:42

lo si può fare un più modi, dipende dal risultato che si vuol raggiungere.
l'immagine è comoda perché, se messa in percentuale, supporta meglio il ridimensionamento del browser.
tutto da verificare il base al contesto

**KillerWorm** · 26-04-2016, 23:49

Ciao, hai indicato pochi dettagli per poterti dare un consiglio mirato, come giustamente fa notare anche VincentZeno.
Ad ogni modo, usando un po' di CSS si potrebbe risolvere facilmente in varie maniere.
Ad esempio con l'uso dei pseudo-elementi :before e :after per definire dei contenuti prima e dopo uno specifico elemento.

Posto un esempio pratico in cui ho definito le due linee (sfruttando la proprietà border) lunghe 100px e colorate di rosso:

codice:

<!DOCTYPE HTML>
<html>
  <head>
    <title>Esempio</title>
    <meta charset="utf-8">
    <style type="text/css">
      span.testoTraLinee:before,
      span.testoTraLinee:after{
        content: "";
        display: inline-block;
        margin: 0 5px;
        width: 100px;
        border-top: 1px solid #F00;
        vertical-align: middle;
      }
    </style>
  </head>
  <body>
    <span class="testoTraLinee">Testo Qui</span>
  </body>
</html>

Se non è quello che cerchi, chiarisci meglio la tua richiesta fornendo tutti i dettagli del caso.

**scartus** · 27-04-2016, 13:16

Originariamente inviata da KillerWorm

Ciao, hai indicato pochi dettagli per poterti dare un consiglio mirato, come giustamente fa notare anche VincentZeno.
Ad ogni modo, usando un po' di CSS si potrebbe risolvere facilmente in varie maniere.
Ad esempio con l'uso dei pseudo-elementi :before e :after per definire dei contenuti prima e dopo uno specifico elemento.

Posto un esempio pratico in cui ho definito le due linee (sfruttando la proprietà border) lunghe 100px e colorate di rosso:

codice:

<!DOCTYPE HTML>
<html>
  <head>
    <title>Esempio</title>
    <meta charset="utf-8">
    <style type="text/css">
      span.testoTraLinee:before,
      span.testoTraLinee:after{
        content: "";
        display: inline-block;
        margin: 0 5px;
        width: 100px;
        border-top: 1px solid #F00;
        vertical-align: middle;
      }
    </style>
  </head>
  <body>
    <span class="testoTraLinee">Testo Qui</span>
  </body>
</html>

Se non è quello che cerchi, chiarisci meglio la tua richiesta fornendo tutti i dettagli del caso.

è esattamente quello che cercavo. Ovviamente avevo preso in considerazione anche l'immagine ma volevo trovare un modo alternativo. Grazie a tutti!!

Discussione: linea interrotta da testo

Strumenti discussione

Ricerca discussione

Visualizza

linea interrotta da testo

Permessi di invio