Загрузочный модальный горизонтальный текст переполнен

Question

С большим текстовым вводом внутри тегов <p> текст переполняет границы модального и с экрана, для чего требуется горизонтальная полоса прокрутки.

Я скопировал пример кода из документации Bootstrap и просто добавил длинную текстовую строку внутри раздела modal-body. Пример на веб-сайте документации Bootstrap, похоже, правильно переносит текст, но мой код этого не делает.

Вот моя разметка:

<div class="modal fade in" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
    <div class="modal-dialog"> 
     <div class="modal-content"> 
      <div class="modal-header"> 
       <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> 
       <h4 id="myModalLabel" class="modal-title">Modal Test</h4> 

      </div> 
      <div class="modal-body"> 
       <p>Details below:</p> 
       <p>TEST: aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p> 
      </div> 
      <div class="modal-footer"> 
       <button type="button" class="btn btn-primary" data-dismiss="modal">Done</button> 
      </div> 
     </div> 
    </div> 
</div> 

Вы также можете увидеть именно то, что я имею в виду горизонтальным переливом на jsFiddle я создал здесь: http://jsfiddle.net/pX39W/11/

Я уверен, что это что-то простое и Я просто смотрел на нее слишком долго, чтобы заметить! Любая помощь приветствуется.

Answer 1

Одним из вариантов было бы использовать word-wrap свойство (предполагая, что текст является один длинное слово):

.modal-body p { 
    word-wrap: break-word; 
} 

http://jsfiddle.net/pX39W/12/