trattino Testo dopo la prima riga di un paragrafo

Question

  

-. Un giornalista Reuters nel distretto Surkhrod nella provincia di Nangarhar, dove gli abitanti hanno detto che i raid hanno avuto luogo, ha detto la polizia afghana ha sparato sulla folla dopo un po 'di loro ha iniziato a lanciare pietre contro edifici governativi locali

Nel paragrafo precedente, vorrei usare i CSS per rendere tutte le righe dopo la prima linea per rientrare automaticamente po 'di spazio in modo che ogni soggiorni di linea a destra dopo il -. Nella prima riga

HTML

<p> - A Reuters reporter in Surkhrod district in Nangarhar province, where 
villagers said the raids took place, said Afghan police fired at the crowd 
after some of them started throwing stones at local government buildings.</p>

E 'simile ad un elemento della lista con la posizione scaletta verso l'esterno, ma non voglio usare una lista.

Qual è il modo più semplice che si può pensare di ottenere questo effetto? markup HTML Meno aggiuntivi saranno migliori.

Molte grazie a tutti voi.

Answer 1

text-indent . Normalmente text-indent spinge la prima linea verso l'interno, ma se si dà una figura meno e utilizzare un margine positivo, è possibile ottenere l'effetto che stai cercando.

text-indent: -10px;
margin-left: 10px

Answer 2

p {
  text-indent: -1em;
  padding-left: 1em;
}

Answer 3

Non utilizzabile in questo momento, ma se si attiva la sperimentale Web piattaforma Bandiera su Chrome è possibile utilizzare text-indent:1em each-line; che dovrebbe fare esattamente quello che vuoi.

text-indent on MDN

Answer 4

Al elementi in linea forse funziona in modo diverso, ho notato. Mi è stato bisogno di un "outdent" (prima linea più a sinistra che sul resto del paragrafo) e ho notato i suggerimenti sopra fatto il contrario - ha creato un trattino regolare (in cui prima linea è più a destra rispetto alle altre linee). Ecco ciò che funziona per un elemento inline, ad esempio, una "a" tag:

#myDiv ul li { margin-left:1em; }
#myDiv ul li a { color:#333; text-indent:0.5em; margin-left:-1em; line-height:1; }

Ho anche impostare l'elemento di blocco contenente avere un margine di 1em, in modo che, quando la linea "a" elementi commence, con i loro margini negativi, in realtà posizione esattamente dove I cose sarebbe stato originariamente prima guai a fare un "outdent".

Spero che questo aiuti qualcuno! Ho anche notato non c'è alcun controllo sulla dimensione in sé text-trattino sul mio elemento inline, sia ....

JSFiddle Esempio

Answer 5

Sulla @ kennytm di risposta; se si vuole allineare il testo a spaziatura fissa, utilizzare unità ch invece di unità em. Ad esempio:

<div class="query-select">SELECT Field1, Field2, Field3, Field4, Field5, Field6, Field7, Field8, Field9, Field10</div>

con imbottitura ch-based / rientri negativi

.query-select {
  padding-left: 8ch;
  text-indent: -7ch;
} 

Sarà render (sulla base di larghezza della pagina) come:

  SELECT Field1, Field2, Field3, Field4, Field5, Field6, 
         Field7, Field8, Field9, Field10