web-dev-qa-db-fra.com

Texte non enveloppé dans un élément div

J'éprouve un problème qui ne s'était jamais produit auparavant et qui semble vraiment sans précédent, certains textes ne sont pas intégrés à une div.

Dans ce lien se trouve un exemple de mon code 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>

De l'aide??

cssword-wraphtmltext
40
Vasileios

C'est parce qu'il n'y a pas d'espaces dans cette longue chaîne et qu'il doit donc sortir de son conteneur. Ajouter Word-break:break-all; à vos règles .title pour forcer une pause.

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

exemple de jsFiddle

52
j08691

J'ai trouvé que cela m'aidait là où mes mots se brisaient à mi-chemin de la Parole dans un plugin WooThemes Testimonial.

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

jouez avec elle ici 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>
63
TimmyD

vous pouvez ajouter cette ligne: Word-break:break-all; à votre code CSS

6
frieder

Le problème dans le jsfiddle est que votre texte factice est un seul mot. Si vous utilisez votre lorem ipsum donné dans la question, le texte se termine bien.

Si vous voulez que les gros mots soient brisés avec Word, ajoutez ceci à votre css .title:

Word-wrap: break-Word;
5
Matt Dalzell

Vous feriez bien de connaître une autre option, Word-wrap: break-Word;

La différence ici est que les mots qui peuvent tenir sur une seule ligne suffiront, par opposition à l'obligation de rompre simplement parce qu'il n'y a plus de biens immobiliers sur lesquels commence Word.

Voir le violon pour une illustration http://jsfiddle.net/Jqkcp/

1
SteamDev