[SOLUCIONADO] Texto problemas al achicar pantalla

[fersosa]

Hola, mi problema es que tengo un texto en un div con una imagen debajo. Dicho texto se ve bien, pero al achicar la pantalla quisiera que se achicara manteniendo su línea y no que queden letras por debajo.
Por ej:
quiero que siempre se lea así - Narrativa
y no así - Nar
rati
va

el código es:
<div id="narrativa"><p>Narrativa</p>
<img src="../responsive/images/tapaslibros/elrevestapa.jpg" align="left"/>
</div>

y el CSS es:
#narrativa {
text-align: center;
font: 200% Arial;
word-wrap: break-word;
}


gracias!

[NueveReinas]

Tendrías que quitar eso de word-wrap: break-word;.

[fersosa]

si quito eso mantiene la línea pero se superpone con el texto del div contiguo, puse ese código para evitar dicha superposición.

[NueveReinas]

Iniciado por fersosa

si quito eso mantiene la línea pero se superpone con el texto del div contiguo, puse ese código para evitar dicha superposición.

No entiendo. Además, no habías mencionado nada de contenedores contiguos.
Por favor, adjunta el código necesario para que pueda/podamos comprender usando el Highlight del foro, o JSFIDDLE.

[fersosa]

Claro, disculpas por no ser tan claro.
el código es:

Código HTML:

<div id="libros"> 
        
        <div id="narrativa"><p>Narrativa</p>
            <a href="http://www.forosdelweb.com/f53/responsive/narrativa.html"><img src="http://www.forosdelweb.com/f53/responsive/images/tapaslibros/elrevestapa.jpg" align="left"/></a>
                </div>
        <div id="poesia"><p><h1>Poesía</h1></p>
            <img src="http://www.forosdelweb.com/f53/responsive/images/tapaslibros/fabriltapa.jpg" align="left"/>
                </div>
        <div id="infantil"><p><h1>Infantil</h1></p>
            <img src="http://www.forosdelweb.com/f53/responsive/images/tapaslibros/osodetrapotapa.jpg" align="left"/>
                </div>
        <div id="otro"><p><h1>Otro</h1></p>
            <img src="http://www.forosdelweb.com/f53/responsive/images/tapaslibros/jorobadotapa.jpg" align="left"/>
                </div>    
        <div id="otro2"><p><h1>Otro2</h1></p>
            <img src="http://www.forosdelweb.com/f53/responsive/images/tapaslibros/sonetosadostapa.jpg" align="left"/>
                </div>   
         
           
    </div>
 

y el css es:

Código CSS:

#libros {
    width: 100%;
    padding: 20px;
    height: auto;
}
#libros div {
  display: inline-block;
  width: 20%;
  padding: 18px;
}
 
#libros #otro2 {
  display: block;
}
#libros img {
    width: 100%;
    height: auto;
}
#narrativa {
    text-align: center;
    font: 200% Arial;
    word-wrap: break-word;
}
 

gracias!

[NueveReinas]

No se ven las imágenes, prueba subiéndolas a Imgur: http://imgur.com/.

[pzin]

No he leído el hilo entero, pero supongo que lo que quieras es usar:

Código CSS:

white-space: nowrap;
 

[fersosa]

Hola!
white-space: nowrap; lo usé y nada...

dejo este link que aunque no se vean las imágenes se ve toda la estructura, espero me puedan ayudar.
muchas gracias!

http://codepen.io/FernandoSosa/pen/zGBOmm

[AngelKrak]

es mejor que uses Media queries amigo ;)

pon este código al final CSS:

Código CSS:

@media all and (max-width: 480px) {
  #libros div {
    display: block;
    width: 80%;
    padding: 10px;
  }
}
 

CODEPEN:
http://codepen.io/AngelKrak/pen/vOKYYL

[fersosa]

funcionó!
mil gracias!
no conozco sobre Media queries, voy a estudiar el tema.
Saludos!!