Проблема с шириной CSS (переполнение страницы)

Question

У меня проблема с CSS. Я пытаюсь остановить текст от переполнения страницы. Я добавил ширину в свой код css, но он работает неправильно. Кто-нибудь может мне помочь, пожалуйста.

Что он делает http://gyazo.com/f209edf6240e3c167dfce0b8cc47c888

https://jsfiddle.net/00scg1w7/1/

HTML код

<div class="contents"> 
    <section> 
     <div class="mt5"></div> 
     <div class="adminNote"> 
      <?php 
      foreach ($team->getTeamNotes($teamBaseData['id']) as $key => $note_Value){?> 
      <div> 
       <b><?=$note_Value['username']?> - <?=date('l F j, Y - g:i A T', $note_Value['created_date'])?></b> <?if(DELETE_ACCESS){?>- <a href="">Remove</a><?}?> 
       <br /> 
       <span style="width: 100%"><?=$note_Value['body']?></span> 
      </div> 
      <hr> 
      <?}?> 
      <?if(EDIT_ACCESS){?> 
      <script type='text/javascript'> 
       function newTeamNote(){ 
        var html = "<textarea class='form-control' id='teamNotesteam' name='teamNotesteam' style='width: 95%; height: 150px;'></textarea><br clear='all' />"; 
        html += "<input class='btn btn-primary btn-center' type='submit' id='postTeamNote' name='postTeamNote' value='Submit Note' />"; 

        $("#teamNote").fadeOut(250,function(){ 
        $(this).html(html).fadeIn(250); 
        }); 
       } 
      </script> 
      <?}?> 
     </div> 
    </section> 
</div> 

CSS код

.adminNote{ 
    max-height: 300px; 
    overflow-x: hidden; 
    overflow-y: scroll; 
} 

.adminNote div{ 
    margin-top: 2px; 
    margin-left: 25px; 
    overflow: hidden; 
    white-space: normal; 
} 

.adminNote span{ 
    width: 500px; 
    white-space: normal; 
} 
textarea.adminNote{ 
    width: 95%; 
    height: 150px !important; 
    margin-top: 15px; 
    resize: none; 
} 

РНР код, когда он представляет в базу данных

if(isset($_POST['postTeamNote'])){ 

    $staffNote = preg_replace("/\r\n|\r/", "<br>", $_POST['teamNotesteam']); 
    $staffNote = trim($staffNote); 
    $staffNote = $sql->real_escape_string($staffNote); 

    $time = time(); 
    if(!empty($staffNote)){ 
     if($sql->query("INSERT INTO `team_notes` (`team_id`, `user_id`, `body`, `created_date`) VALUES ('$teamBaseData[id]', '".USER_ID."', '$staffNote', '$time')")){ 
      $_SESSION['meg'] = 'new_note'; 
      $logs->staffLog('Created Team Note - Team ID: '.$teamBaseData['id'].'', 'black'); 
      header('location: '.URL_CP.'team/view/'.$teamBaseData['id'].''); 
     } 
    }else{ 
     $_SESSION['meg'] = 'no_text'; 
    } 
} 

Answer 1

Вы пытались использовать перенос слов или слово-брейк?

• Word-обертывание: длинные линии будут продолжаться на следующей строке и установить не «перерыв».

• Word-брейк (брейк-все): заставляет слово «перерыв» на крае

Я полагаю, что если ваш DIV уже есть, один из двух ширинов помочь вам в вашем CSS ,

Upd: В вашем jsfiddle, если добавить к пролете .adminNoteперенос слов: брейк-слова; Текст завернут.