que - selector padre css

Texto no envuelto dentro de un elemento div

Question

Estoy experimentando un problema que nunca sucedió antes y parece realmente sin precedentes, algún texto no se está ajustando dentro de un div.

En este enlace hay una muestra de mi código html:

http://jsfiddle.net/NDND2/2/

<div id="calendar_container">
   <div id="events_container">  
      <div class="event_block">
         <div class="title">
            lorem ipsum lorem ipsumlorem ipsumlorem ipsumlorem
         </div>
      </div>
   </div>
</div>

¿¿Alguna ayuda??

Answer 1

El problema en el archivo jsfiddle es que su texto de relleno es una sola palabra. Si usa su lorem ipsum dado en la pregunta, entonces el texto se ajusta bien.

Si desea que las palabras grandes se rompan a mitad de la palabra y se envuelvan, agregue esto a su .title css:

word-wrap: break-word;

Answer 2

Encontré que esto era útil cuando mis palabras se estaban rompiendo en parte en un complemento de Testimonial de WooThemes.

.testimonials-text {
    white-space: normal;
}

Juega con él aquí http://nortronics.com.au/recomendations/

<blockquote class="testimonials-text" itemprop="reviewBody">

<a href="http://www.jacobs.com/" class="avatar-link">

<img width="100" height="100" src="http://nortronics.com.au/wp-content/uploads/2015/11/SKM-100x100.jpg" class="avatar wp-post-image" alt="SKM Sinclair Knight Merz">

</a>
<p>Tim continues to provide high-level technical applications advice and support for a very challenging IP video application. He has shown he will go the extra mile to ensure all avenues are explored to identify an innovative and practical solution.<br>Tim manages to do this with a very helpful and professional attitude which is much appreciated.
</p>
</blockquote>

Answer 3

Eso es porque no hay espacios en esa cadena larga, por lo que tiene que salir de su contenedor. Añadir word-break:break-all; a tus reglas de título para forzar un descanso.

#calendar_container > #events_container > .event_block > .title {
    width:400px;
    font-size:12px;
    word-break:break-all;
}

Ejemplo de jsFiddle

Answer 4

Podría beneficiarle de estar al tanto de otra opción, word-wrap: break-word;

La diferencia aquí es que las palabras que pueden caber completamente en 1 línea lo harán, en lugar de verse obligadas a romper simplemente porque no hay más bienes raíces en la línea en la que comienza la palabra.

Ver el violín para una ilustración http://jsfiddle.net/Jqkcp/

Answer 5

puede agregar esta línea: word-break:break-all; a tu código CSS