Rientra a partire dalla seconda riga di un paragrafo con CSS

103

Come posso rientrare a partire dalla seconda riga di un paragrafo?

ho provato

p {
    text-indent: 200px;
}
p:first-line {
    text-indent: 0;
}

e

p {
    margin-left: 200px;
}
p:first-line {
    margin-left: 0;
}

e

(with position:relative;)
p {
    left: 200px;
}
p:first-line {
    left: 0;
}

— Reuben
fonte

Perché tutti i rientri del testo della prima riga sono impostati su 0? Inoltre, non so come farlo, ma quello che manca da questo elenco è quello che ha più senso per me, il riempimento.

— Skarlinski

211

È letteralmente solo la seconda riga che vuoi far rientrare, o è dalla seconda riga (cioè un rientro sporgente )?

Se è il secondo, qualcosa sulla falsariga di questo JSFiddle sarebbe appropriato.

    div {
        padding-left: 1.5em;
        text-indent:-1.5em;
    }
    
    span {
        padding-left: 1.5em;
        text-indent:-1.5em;
    }

<div>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</div>

<span>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</span>

Espandi lo snippet

Questo esempio mostra come l'utilizzo della stessa sintassi CSS in un DIV o in uno SPAN produca effetti diversi.

— redditor
fonte

3

@Reuben Sulla base del tuo commento che ora è stato cancellato, presumo che tu abbia inteso dire dalla seconda riga - e per il bene dei futuri visitatori, forse questo violino è migliore, dove la sintassi è P non div o span. jsfiddle.net/gg9Hx

— redditor

1

Perché il riempimento a sinistra e quindi il rientro del testo negativo? Perché deve funzionare così? Sembra strano. Perché non solo un positivo text-indent?

— Don Cheadle

2

Il rientro del testo non ha alcun effetto sull'intervallo. Può essere rimosso dallo stile della campata per lo stesso risultato.

— Sam Hasler

25

Crea margine sinistro: 2em o giù di lì sposterà l'intero testo inclusa la prima riga a 2em destro. Quindi aggiungi text-indent (applicabile alla prima riga) come -2em o giù di lì .. Questo riporta la prima riga all'inizio senza margine. L'ho provato per i tag di elenco

<style>
    ul li{
      margin-left: 2em;
      text-indent: -2em;
    }
</style>

— vineetma
fonte

24

Questo ha funzionato per me:

p { margin-left: -2em; 
 text-indent: 2em 
 }

— xoandre
fonte

10

Questo sembra fare l'esatto contrario di ciò che l'OP ha chiesto. La versione di @ techillage è corretta. Devi scambiare il meno

— Alex Holsgrove

1

Questo è quasi esattamente ciò di cui avevo bisogno. La risposta accettata non funzionerà per me perché non ho la libertà nel mio CMS di aggiungere intervalli in questo modo. L'unico problema che ho avuto con la soluzione qui è che il margine sinistro estrarrà l'intero paragrafo fuori da un contenitore. Quindi ho aggiunto "position: relative" e "left: 2em" ed è perfetto. Contrariamente al commento di @AlexHolsgrove, la risposta di techillage non ha funzionato affatto, ma forse perché non lo sto facendo su un elemento della lista.

— Stu Furlong

2

Avevo bisogno di indentare due righe per consentire una prima parola più grande in un paragrafo. Una soluzione una tantum ingombrante è inserire il testo in un elemento SVG e posizionarlo come un <img>. L'utilizzo di float e il tag height di SVG definisce quante righe saranno rientrate ad es

<p style="color: blue; font-size: large; padding-top: 4px;">
<svg height="44" width="260" style="float:left;margin-top:-8px;"><text x="0" y="36" fill="blue" font-family="Verdana" font-size="36">Lorum Ipsum</text></svg> 
dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>

L'altezza e la larghezza di SVG determinano l'area bloccata.
Y = 36 è la profondità della linea di base del testo SVG e uguale alla dimensione del carattere
I margin-top consentono il miglior allineamento del testo SVG e del testo para
Usa le prime due parole qui per ricordare la cura necessaria per i discensori

Sì, è ingombrante ma è anche indipendente dalla larghezza del div contenitore.

La risposta di cui sopra era alla mia domanda per consentire alle prime parole di un para di essere più grandi e posizionate su due righe. Per indentare semplicemente le prime due righe di un para puoi sostituire tutti i tag SVG con il seguente singolo pixel img:

<img src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" style="float:left;width:260px;height:44px;" />

— Tony
fonte

2

C'è una bozza di lavoro CSS3 che (si spera presto) ti permetterà di scrivere solo:

p { text-indent: 200px hanging; }

Tieni d'occhio: https://developer.mozilla.org/en-US/docs/Web/CSS/text-indent

— Nasia Makrygianni
fonte

1

Se usi lo stile come elenco

puoi "text-align: initial" e le righe successive rientreranno tutte. Mi rendo conto che questo potrebbe non essere adatto alle tue esigenze, ma stavo controllando se c'era un'altra soluzione prima di cambiare il mio markup.

Immagino che anche inserire la seconda riga funzionerebbe, ma richiede il pensiero umano affinché il contenuto fluisca correttamente e, ovviamente, interruzioni di riga nette (il che non mi disturba, di per sé).

— morrie
fonte

1

benvenuto in Stackoverflow. Sembra che tu abbia una soluzione a questo problema di rientro. Tuttavia, sarebbe di grande aiuto per tutti se fornissi del markup e spiegassi la soluzione. Potrebbe essere possibile utilizzare jsfiddle.net o un altro servizio per creare una demo funzionante. Ti auguro il meglio.

— EGL 2-101