Anchuras mínimas en párrafos en diseños fluídos 27.3.12
Anchuras mínimas en párrafos en diseños fluídos
Créditos: Artículo original de Gustav Andersson publicado en css.tricks
El problema
Mira la imagen de la izquierda para identificar el problema: en un diseño fluido, una imagen flotada y un texto. Llega el momento en que una palabra es lo suficientemente larga como para no tener sitio junto a la imagen y dar el salto todo el texto restante hasta colocarse por debajo de la imagen. Feo, antiestético y dificulta la lectura.
La primera intención sería dar una anchura mínima al párrafo, cosa que no arregla la situación. El flotado no disminuye la anchura computada para el párrafo, aunque sí la disponible para colocar el texto.
(De mi cosecha ajeno al artículo original: un tamaño en % al elemento flotado tampoco, al font-size no le atañe, y quizás el elemento pierda su valor a determinado tamaño o te encuentres situaciones no deseables.)
Dos soluciones Dos
Media Queries
Si la imagen o cualquier elemento flotado tiene una anchura fija a la hora de realizar el css, algo tan simple como utilizar las @media queries para anular el flotado en determinado tamaño:
@media screen and (max-width: 400px) {
img { float: none;}
}
La Contra: Hay navegadores que no soportan las @media queries.
Solución universal con pseudoelemento
En el caso de desconocer el tamaño del elemento flotado podrían darse situaciones poco elegantes. Una solucción mejor es utilizar el pseudoelemento :before y que no sea visible. Asignándole una anchura suficiente, en caso de no tener espacio para él se colocará bajo (eje Y) la imagen y forzará al texto a posicionarse tras él.
p:before {
content: "";
width: 10em;
display: block;
overflow: hidden;
/* Para la demostración */
border: 1px solid green;
}
Prácticamente es soportado por todos los navegadores, y en caso de encontrarte con alguno que no, símplemente estaremos en la situación original de partida.
Ejemplos en vivo de las situaciones
Párrafo con anchura mínima
El declarar un min-width no es solución cuando hay elementos flotados.
El problema
Hay que ver y garantizar que los párrafos puede manejar el espacio limitado dejado por las imágenes flotantes.
Media Queries
Anulando el float para anchuras mínimas. Redimensiona la ventana < 400px
Hay que ver y garantizar que los párrafos puede manejar el espacio limitado dejado por las imágenes flotantes.
PseduoElemento
El pseduo elemento en verde (visible para el ejemplo).
Hay que ver y garantizar que los párrafos puede manejar el espacio limitado dejado por las imágenes flotantes.
Créditos: Artículo original de Gustav Andersson publicado en css.tricks
Kseso
the obCSServer ᛯ Ramajero Argonauta, Enredique Amanuense de CSS.#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.
@Kseso EsCss Kseso