Rientrare solo la prima riga di testo in un paragrafo?

Question

Ho diversi paragrafi che vorrei rientrare, anche se solo le prime righe di questi paragrafi.

Come mi prendi di mira solo le prime righe usando CSS o HTML?

Answer 1

Utilizzare il text-indent proprietà.

p { 
   text-indent: 30px;
}

jsfiddle.

Answer 2

Oltre al testo, puoi usare il :first-line Selettore se si desidera applicare stili aggiuntivi.

p:first-line {
    color:red;
}

p {
    text-indent:40px;
}

http://jsfiddle.net/madmartigan/d4aca/1/

Answer 3

Molto semplice usando CSS:

p {
    text-indent:10px;
}

Creerà una rientranza di 10 pixel in ogni paragrafo.

Answer 4

Stavo anche avendo un problema a ottenere la prima riga di un paragrafo (solo la prima riga) a rientrare e stavo provando il seguente codice:

p::first-line { text-indent: 30px; }

Questo non ha funzionato. Quindi, ho creato una classe nel mio CSS e l'ho usato nel mio HTML come segue:

In CSS:

.indent { text-indent: 30px; }

In HTML:

<p class="indent"> paragraph text </p>

Questo ha funzionato come un fascino. Non so ancora perché il primo esempio di codice non abbia funzionato e mi sono assicurato che il testo non fosse allineato.

Answer 5

Ecco qui:

p:first-line {
    text-indent:30px;
}

Non ho visto una risposta chiara per un principiante CSS, quindi eccone uno facile.

Answer 6

Altri hanno menzionato il modo migliore per implementarlo tramite CSS, tuttavia se hai bisogno di una soluzione rapida con la formattazione in linea, usa semplicemente il seguente codice:

<p style="text-indent: 40px">This text is indented.</p>

Fonte: https://www.computerhope.com/issues/ch001034.htm

Answer 7

Ho incontrato lo stesso problema solo io avevo più <p> Tag con cui ho dovuto lavorare. Utilizzando la proprietà "Testo-Indent" voleva rientrare a tutti i <p> Tag e non è quello che volevo.

Volevo aggiungere un'immagine di preventivo di fantasia a un elenco di testimonianze, con l'immagine basata sullo sfondo CSS all'inizio di ogni citazione e il testo seduto a destra dell'immagine. Da text-indent Stava causando a tutti i paragrafi successivi, non solo il primo paragrafo, ho dovuto fare un po 'di soluzione alternativa. Lo stesso metodo si applica se non stai cercando di fare un'immagine.

Ho realizzato questo aggiungendo prima un div vuoto all'inizio del paragrafo che volevo rientrante. Successivamente ho applicato una piccola larghezza e altezza per creare la scatola invisibile e alla fine ho applicato un galleggiante sinistro per farlo fluire in linea con il testo. Se lo stai usando per un'immagine, assicurati di aggiungere un margine a destra o rendere la tua larghezza un po 'più ampia per un po' di spazio bianco.

Ecco un esempio con il CSS in linea. Puoi facilmente creare una classe e aggiungerla al tuo file CSS:

<div style="height: 25px; width: 25px; float: left;"></div>
<p>First Paragraph</p>
<p>Second Paragraph</p>

Answer 8

Primo rientro tutte le linee (1), che outdent la prima riga (2)

padding-left: 0.4em /* (1) */
text-indent: -0.4em /* (2) */