Buenas.

Tengo un sitio el cual le agregue un Blog, las noticias las muestro en recuadros de 241px x 250px, el modo de generacion de los "thumbs" de las noticias son, cabe mencionar que cada 3 thumbnails (recuadros) los encierro un una capa, para evitar eso de que si una noticia se pasa de Largo, no se obstruya en la demas, y que todo se vea parejito...

Les dejo un ejemplo de 3 thumbails impresos en CSS:

<div id="blog"> 
 
     <div id="list">
          <div id="box">
               <div class="in">
                    <h1>titulo largo de 500 caracteres</h1>
                    <p>contenido largo de 2000 caracteres</p>
               </div>
          </div>
     </div>
 
</div>
 

Se supone que en el titulo (<h1>titulo largo de 500 caracteres</h1>) de aparecer los 500 caracteres dentro de los 241px de ancho de la capa, pero NO, hagan de cuenta que se sigue imprimiendo el texto a todo lo largo y cuando llega al extremos de los 241px se queda atras.... Lo mismo sucede para el contenido .

Lo que quiero es que el texto no se quede atras y se siga imprimiendo, que quede dentro de los 241px todos los caracteres.

Asi es como se ve: [Ver Imagen]

Asi es... pero no quiero usar word-wrap ya que se supone eso lo debe hacer el interprete solito (sin pasarle el corte)... No entiendo donde puse mas las cosas, paso mi codigo CSS:

#blog {overflow:hidden;}
#blog #lista {margin:auto;text-align:left;padding:0px;overflow:hidden;border:solid 0px red;}
#blog .icono{margin:0px 2px 0px 2px;float:right;}
#blog #lista .iconos_votaciones {margin:4px 2px 0px 2px;}
#blog #caja {font:11px Arial, Verdana, sans-serif;margin:3px;padding:2px 2px 12px 2px;border:solid 1px #ffffff;
overflow:hidden;float:left;width:241px;height:250px;}
#blog #caja:hover {background-position:right top;overflow:hidden;border-width:1px;
border-color:#f8f8ff;}
#blog #caja img {text-align:center;margin:5px;}
#blog #caja h1 {margin:0px 0px 4px 0px;padding:2px 5px 2px 5px;font:13px Arial, Verdana, sans-serif;font-weight:bold;
border:solid 0px #fbfbef;border-bottom-width:1px;color:#6e6e6e;}
#blog #caja p {margin:0px;padding:0px;margin-top:5px;color:#6e6e6e;}
#blog #caja a {text-decoration:none;color:#007299;}
#blog #caja a:link {text-decoration:none;}
#blog #caja a:hover {text-decoration:underline;}
#blog #caja .in {width:235px;height:95%;padding:0px 2px 2px 2px;overflow:hidden;}

Y un ejemplo de como se imprime un solo thumbnail en html+css:

<div id="blog"> 
 
     <div id="list">
          <div id="box">
               <div class="in">
                    <h1>titulo largo de 500 caracteres</h1>
                    <p>contenido largo de 2000 caracteres</p>
               </div>
          </div>
     </div>
 
</div>