CSS para detener el ajuste de texto debajo de la imagen


87

Tengo el siguiente marcado:

<li id="CN2787">
  <img class="fav_star" src="images/fav.png">
  <span>Text, text and more text</span>
</li>

Lo quiero para que si el texto se ajusta, no entre en la 'columna' de la imagen. Sé que puedo hacerlo con table(lo que estaba haciendo) pero esto no es viable por esta razón .

He intentado lo siguiente sin éxito:

li span {width: 100px; margin-left: 20px}
.fav_star {width: 20px}

También lo intenté float: right.

Gracias.

EDITAR: quiero que se vea así:

IMG   Text starts here and keeps going... and
      wrap starts here.

Así no:

IMG   Text starts here and keeps going... and 
wrap starts in the space left for the image.

1
¿Puedes poner tu código en jsfiddle?
Hardik

Creo que debes ser un poco más claro acerca de tus intenciones aquí. Si no desea que el texto se ajuste a continuación, sólo tiene que utilizar white-space: nowrap;en li span {...}, pero me da la impresión de que usted está tratando de hacer otra cosa
Me duele la cabeza

@MyHeadHurts Disculpas - me pareció claro :) Quiero dos columnas en la línea. Los 20px de la izquierda son para una imagen. El resto es para texto. Si el texto se ajusta, quiero que comience la segunda línea del ajuste 20px desde la izquierda (debajo de donde comenzó el texto inicial).
Nick

1
Para los transeúntes, no necesita lidiar con anchos como sugiere la respuesta aceptada. Es mucho más simple: cree lo que se llama un nuevo contexto de formato . Vea la respuesta de Joe Conlin. Para más antecedentes, vea el mío.
hqcasanova

1
@hqcasanova Para que conste, la respuesta de Dan fue aceptada 9 meses antes de que Joe publicara la suya y 16 meses antes que la tuya. No voy a dejar de aceptar la respuesta de Dan, aunque gracias por agregar alternativas.
Nick

Respuestas:


35

Dado que esta pregunta está ganando muchas visitas y esta fue la respuesta aceptada, sentí la necesidad de agregar el siguiente descargo de responsabilidad:

Esta respuesta fue específica para la pregunta del OP (que tenía el ancho establecido en los ejemplos). Mientras funciona, requiere que tengas un ancho en cada uno de los elementos, la imagen y el párrafo. A menos que ese sea su requisito, le recomiendo usar la solución de Joe Conlin, que se publica como otra respuesta a esta pregunta.

El spanelemento es un elemento en línea, no puede cambiar su ancho en CSS.

Puede agregar el siguiente CSS a su tramo para que pueda cambiar su ancho.

display: block;

Otra forma, que suele tener más sentido, es utilizar un <p>elemento como padre para su <span>.

<li id="CN2787">
  <img class="fav_star" src="images/fav.png">
  <p>
     <span>Text, text and more text</span>
  </p>
</li>

Como <p>es un blockelemento, puede establecer su ancho usando CSS, sin tener que cambiar nada.

Pero en ambos casos, dado que ahora tiene un elemento de bloque, necesitará hacer flotar la imagen para que su texto no quede debajo de la imagen.

li p{width: 100px; margin-left: 20px}
.fav_star {width: 20px;float:left}

En lugar de PS float:leften la imagen, también se puede poner float:righten li ppero en ese caso, también tendrá que text-align:leftvolver a alinear el texto correctamente.

PSS Si siguió adelante con la primera solución de no agregar un <p>elemento, su CSS debería verse así:

li span{width: 100px; margin-left: 20px;display:block}
.fav_star {width: 20px;float:left}

Esto es realmente útil. Cambié el spana un pelemento. A continuación, sólo estos dos parecían hacer el truco: li p {margin-left: 40px} .fav_star {float: left}. El ancho de la imagen lo establece la propia imagen, el pelemento es automáticamente a blocky dejé el ancho solo. Gracias por esto.
Nick

2
Si va a usar, display:blocktambién puede usar a, divya que para eso es (o use a pcomo también sugiere). No es necesario ajustar el texto dos veces; si usa un p, puede perder el span.
Gareth

En mi opinión, no debería utilizar HTML para cambiar el diseño de sus páginas. Este es el trabajo para CSS (hay excepciones, por supuesto, especialmente cuando necesita compatibilidad entre navegadores). Creo que usar HTML adecuado y tener una "buena semántica" es más importante. Entonces no usaría div, en este caso, a ptiene más sentido. Perder el spanes un poco trivial para mí y depende de cómo estés diseñando tu contenido.
Dan

¡Envolver un <span>en un <p>es brujería directamente de Hogwartz! ¡Funciona maravillosamente!
Janus

252

Respuesta muy simple para este problema que parece atrapar a mucha gente:

<img src="url-to-image">
<p>Nullam id dolor id nibh ultricies vehicula ut id elit.</p>

    img {
        float: left;
    }
    p {
        overflow: hidden;
    }

Ver ejemplo: http://jsfiddle.net/vandigroup/upKGe/132/


11
Ésta es la respuesta correcta a esta pregunta. Esta técnica no requiere establecer un ancho fijo para el párrafo. Solución mucho más simple y fácil. Funciona perfectamente, incluso en IE8.
Chocolata

4
Bueno, de hecho, esto no funcionará si el elemento que contiene el texto fuera un span(el caso del OP). Una display: blocksería necesaria para el span. Pero, salvo eso, estoy de acuerdo en que es una solución mucho más elegante. En caso de que alguien se pregunte cuál es la magia detrás overflow: hidden, vea mi respuesta a continuación.
hqcasanova

7
No es el comportamiento que esperaría, pero es asombroso.
Gavin

2
Para que conste, esta respuesta llegó 8 meses después de la que marqué :)
Nick

2
Guau. Funcionó perfectamente. No puedo creer que nunca supe esto antes.
SFlagg

25

Para aquellos que quieran información general, aquí hay un breve artículo que explica por qué overflow: hiddenfunciona. Tiene que ver con el llamado contexto de formato de bloque . Esto es parte de la especificación de W3C (es decir, no es un truco) y es básicamente la región ocupada por un elemento con un flujo tipo bloque.

Cada vez que se aplica, overflow: hiddencrea un nuevo contexto de formato de bloque. Pero no es la única propiedad capaz de desencadenar ese comportamiento. Citando una presentación de Fiona Chan de Sydney Web Apps Group:

  • flotador: izquierda / derecha
  • desbordamiento: oculto / automático / desplazamiento
  • pantalla: celda de tabla y cualquier valor relacionado con la tabla / bloque en línea
  • posición: absoluta / fija

1
¿Puede agregar algunos detalles de ese artículo en su respuesta, en caso de que el enlace falle?

¡Buenos días Australia! Gracias por el comentario.
hqcasanova

Esto es excelente para mostrar bloques de código que podrían tener que lidiar con imágenes o barras laterales flotantes cercanas.
AlexMA

La técnica descrita originalmente funciona bien, aunque como han dicho otros, no es el comportamiento que esperaría. Sin embargo, no veo que los bloques flotantes o en línea funcionen sin desbordamiento y, por supuesto, los valores de visualización relacionados con la tabla y la posición absoluta o fija tienen otras consecuencias de diseño que pueden o no ser aceptables en el contexto.
enigment

3

Si desea margin-leftque funcione en un spanelemento, deberá hacerlo display: inline-blocko display:blocktambién.


Probablemente necesite vertical-align: top;en la imagen con esto también.
ThinkingStiff

2

la configuración display:flexdel texto funcionó para mí.


Esto parece ser un equivalente más moderno de ambientación overflow:auto. Estoy seguro de que no funciona exactamente igual en todas las situaciones, pero a mí también me funcionó.
Matt Browne

1

Envuelva un div alrededor de la imagen y el lapso y agregue lo siguiente a CSS así:

HTML

        <li id="CN2787">
          <div><img class="fav_star" src="images/fav.png"></div>
          <div><span>Text, text and more text</span></div>
        </li>

CSS

            #CN2787 > div { 
                display: inline-block;
                vertical-align: top;
            }

            #CN2787 > div:first-of-type {
                width: 35%;
            }

            #CN2787 > div:last-of-type {
                width: 65%;
            }

MENOS

        #CN2787 {
            > div { 
                display: inline-block;
                vertical-align: top;
            }

            > div:first-of-type {
                width: 35%;
            }
            > div:last-of-type {
                width: 65%;
            }
        }
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.