Come posso evitare gli orfani di testo HTML?

Question

mi hanno spesso un'immagine che ho disporre il testo intorno, e, talvolta, i testi avvolge goffamente, in questo modo:

In HTML, l'immagine è flottato a sinistra e il testo segue semplicemente:

<p><img style="float:left;" src="/images/[image]" /></p> 
<p>This is my David Copperfield, <em>I was born</em> kind of bio.  For a more concise one, please see the <a href="/jenny/press-kit#bio">press kit</a>.</p> 
... 

Principalmente funziona, eccetto quando la lunghezza del testo capita semplicemente di scorrere oltre il fondo dell'immagine e tornare al margine sinistro e quando la quantità di testo non è abbastanza lunga da riempire più di una riga (in questo caso, è solo una parola). Quando ciò accade, sembra davvero male.

Quindi, c'è un modo per controllare il flusso del testo in modo che ciò non accada?

Answer 1

Che cosa si potrebbe fare è aggiungere overflow: hidden ai p tag in cui v'è il testo. Questo renderà tutto ciò che il testo che avvolge dopo l'immagine sarà in linea con la parte più grande. Ora, quando hai dei paragrafi grandi, questo può sembrare divertente, ma se i tuoi paragrafi sono abbastanza brevi questo dovrebbe aiutare.

Esempio: http://jsfiddle.net/8ZsKy/2/

alternativamente si può solo aggiungere una regola di classe e applicarlo al potenziale "problema" paragrafi.

p.wrap-inline { 
    overflow:hidden; 
} 

EDIT: jsfiddle aggiornato (oops)

Answer 2

<img style="float:left; clear="both" src="/images/[image]" /> 

Answer 3

Questa domanda in realtà aveva fatto pensare, anche se in realtà è fastidioso a volte, in passato ho fissato problemi simili a questo regolando l'altezza della linea un po ',

line-height:20px; 

o regolare la dimensione reale dell'immagine un po 'più grande o più piccolo,

<img style="float:left;" src="/images/[image]" width="100" height="200" /> 

o alterare il tracciamento del testo

letter-spacing: 0.1em; 

o l'uso sillabazione (non mi piace o consiglio)

hyphens: auto; 

Tuttavia per quanto riguarda la mia conoscenza va non so di eventuali regole CSS per eliminare gli orfani di testo. Potrebbero esserci script, ma non ne ho mai sentito parlare e ho fatto un po 'di ricerche su di esso qualche tempo fa. Spero sia stato utile :)

Answer 4

Ecco come funziona il floating. Se non lo desideri, non utilizzare float; puoi ad es. usa invece il posizionamento, in modo che il testo appaia come un blocco sulla destra dell'immagine.

Purtroppo non c'è modo di utilizzare il floating e la richiesta ad es. che l'ultima riga non dovrebbe essere breve. È possibile impedire che l'ultima parola appaia su una riga a sé stante utilizzando uno spazio senza interruzioni tra esso e la parola precedente, ad es. it will. E potresti estenderlo a un gruppo di parole brevi. Ma questo significherebbe solo che il gruppo appare su una linea a sé stante e la linea precedente è corrispondentemente più breve (e può quindi sembrare strana).

Se il testo è solo un po 'troppo lungo, è possibile modificare il rendering in modo che occupi meno spazio verticalmente, ad es. rimuovendo le linee vuote tra i paragrafi, anche se questo sarebbe un grande cambiamento di layout (anche se forse una buona):

p { margin: 0 } 
p + p { text-indent: 1.3em; }