¿Cómo puedo evitar que los huérfanos de texto HTML?

A menudo tengo una imagen con la que envuelvo el texto y, a veces, los textos se ajustan torpemente, de esta manera:

introduzca la descripción de la imagen aquí

En el HTML, la imagen se hace flotar a la izquierda y el texto simplemente sigue:

This is my David Copperfield, I was born kind of bio. For a more concise one, please see the press kit.

...

Esto funciona principalmente, excepto cuando la longitud del texto pasa por la parte inferior de la imagen y fluye hacia el margen izquierdo, y cuando la cantidad de texto no es lo suficientemente larga como para llenar más de una línea (en este caso, es solo una palabra). Cuando eso sucede, se ve muy mal.

Entonces, ¿hay una manera de controlar el flujo de texto para que esto no suceda?

Lo que podría hacer es agregar un overflow: hidden a las tags p donde hay texto. Esto hará que cualquier texto que se ajuste después de la imagen esté en línea con la parte más grande. Ahora, cuando tiene párrafos grandes, esto puede parecer gracioso, sin embargo, si sus párrafos son bastante cortos, esto debería ser útil.

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

alternativamente, simplemente puede agregar una regla de clase y aplicarla a posibles párrafos de “problema”.

 p.wrap-inline { overflow:hidden; } 

EDITAR : jsfiddle actualizado (oops)

Así es como funciona la flotación. Si no quieres eso, no uses float ; puede, por ejemplo, utilizar posicionamiento, de modo que el texto aparezca como un bloque a la derecha de la imagen.

Desafortunadamente, no hay forma de usar flotante y solicitar, por ejemplo, que la última línea no sea corta. Puede evitar que la última palabra aparezca en una línea propia utilizando un espacio sin interrupciones entre ella y la palabra anterior, por ejemplo it will Y podrías extender esto a un grupo de palabras cortas. Pero esto solo significaría que el grupo aparece en una línea propia y que la línea anterior es correspondientemente más corta (y por lo tanto puede parecer impar).

Si el texto es demasiado largo, puede modificar su representación para que ocupe menos espacio verticalmente, por ejemplo, eliminando las líneas vacías entre los párrafos, aunque esto sería un cambio de diseño importante (aunque quizás sea bueno):

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

Esta pregunta realmente me hizo pensar, aunque a veces es molesto. En el pasado, he solucionado problemas similares ajustando un poco la altura de la línea.

 line-height:20px; 

o ajustando el tamaño real de la imagen un poco más grande o más pequeño,

  

O alterar el seguimiento del texto.

 letter-spacing: 0.1em; 

o usar guiones (no me gusta ni lo recomiendo)

 hyphens: auto; 

Sin embargo, por lo que sé, no conozco ninguna regla de css para eliminar los huérfanos de texto. Puede que haya scripts, pero nunca he oído hablar de ellos y he investigado un poco hace un tiempo. Espero que haya ayudado 🙂