Текст Rails Bootstrap внутри <div>в ячейке <td>без переноса

Question

У меня есть таблица, в которой я перечисляю некоторые хеш-элементы. Я хотел бы иметь новую строку для каждого элемента в списке, но если элемент очень длинный и проходит за правый край ячейки таблицы, он просто исчезает со страницы. Я хотел бы, чтобы переполнение было завершено. Мой файл ERB выглядит так:

<table id="audit_trail_table" class="table table-striped table-bordered dataTable" cellspacing="0" role="grid" aria-describedby="audit_trail_table">
  <thead>
  <tr>
    <th class="text-center col-sm-2">Date</th>
    <th class="text-center col-sm-1">User</th>
    <th class="text-center col-sm-1">Item</th>
    <th class="text-center col-sm-1">Action</th>
    <th class="text-center">Changes</th>
  </tr>
  </thead>

  <tbody>
  <% @audits.each do |audit| %>
    <tr>
      <td><%= audit.created_at.strftime("%F@%T") %></td>
      <td><%= "#{audit.first_name} #{audit.last_name}" %></td>
      <td><%= audit.auditable_type.titleize %></td>
      <td><%= audit.action.titleize %></td>
      <td>
        <% audit.audited_changes.each do |key,value| %>
          <div><%= "#{key.to_s} : #{value.to_s}" %></div>
      <% end %>
      </td>
    </tr>
  <% end %>
  </tbody>
</table>

Вот полученный HTML-код:

<table id="audit_trail_table" class="table table-striped table-bordered dataTable no-footer" cellspacing="0" role="grid" aria-describedby="audit_trail_table_info">
  <thead>
  <tr role="row"><th class="text-center col-sm-2 sorting_desc" tabindex="0" aria-controls="audit_trail_table" rowspan="1" colspan="1" aria-sort="descending" aria-label="Date: activate to sort column ascending" style="width: 148px;">Date</th><th class="text-center col-sm-1 sorting" tabindex="0" aria-controls="audit_trail_table" rowspan="1" colspan="1" aria-label="User: activate to sort column ascending" style="width: 55px;">User</th><th class="text-center col-sm-1 sorting" tabindex="0" aria-controls="audit_trail_table" rowspan="1" colspan="1" aria-label="Item: activate to sort column ascending" style="width: 55px;">Item</th><th class="text-center col-sm-1 sorting" tabindex="0" aria-controls="audit_trail_table" rowspan="1" colspan="1" aria-label="Action: activate to sort column ascending" style="width: 55px;">Action</th><th class="text-center sorting" tabindex="0" aria-controls="audit_trail_table" rowspan="1" colspan="1" aria-label="Changes: activate to sort column ascending" style="width: 613px;">Changes</th></tr>
  </thead>

  <tbody>
   <tr role="row" class="odd">
      <td class="sorting_1">2018-04-27@18:34:44</td>
      <td>Andrew Reilly</td>
      <td>Cleaning</td>
      <td>Update</td>
      <td>
          <div>cleaning_date : [nil, "2018-04-27"]</div>
      </td>
    </tr>
    <tr role="row" class="even">
      <td class="sorting_1">2018-04-27@18:34:07</td>
      <td> firefighter</td>
      <td>Cleaning</td>
      <td>Create</td>
      <td>
          <div>notes : testing audits</div>
          <div>ppe_id : 14</div>
          <div>user_id : 5</div>
          <div>advanced : false</div>
          <div>cleaning_date : </div>
          <div>failed_inspection : false</div>
      </td>
    </tr>
    <tr role="row" class="odd">
      <td class="sorting_1">2018-04-27@18:33:25</td>
      <td> firefighter</td>
      <td>Inspection</td>
      <td>Create</td>
      <td>
          <div>passed : true</div>
          <div>ppe_id : 16</div>
          <div>results : {"serial"=&gt;"10011", "soiled"=&gt;"pass", "assigned_to"=&gt;"firefighter, ", "contaminated"=&gt;"pass", "inspection_date"=&gt;"2018-04-27", "loss_of_face_opening_adjustment"=&gt;"pass", "reflective_trim_missing_damaged"=&gt;"pass", "shell_physical_damage_seam_integrity"=&gt;"pass", "shell_physical_damage_thermal_damage"=&gt;"pass", "ear_flaps_physical_damage_thermal_damage"=&gt;"pass", "ear_flaps_physical_damage_rips_tears_cuts"=&gt;"pass", "face_shield_goggle_damage_or_missing_components"=&gt;"pass", "suspension_retention_system_damage_or_missing_components"=&gt;"pass", "shell_physical_damage_cracked_crazing_dents_and_abrasions"=&gt;"pass"}</div>
          <div>user_id : 5</div>
          <div>advanced : false</div>
      </td>
    </tr>
    <tr role="row" class="even">
      <td class="sorting_1">2018-04-23@18:06:09</td>
      <td>Andrew Reilly</td>
      <td>Ppe</td>
      <td>Update</td>
      <td>
          <div>user_id : [1, 24]</div>
      </td>

    </tr>
  </tbody>
</table>

Который производит таблицу типа:

строка results выходит с правой стороны. Я могу сделать так, чтобы он прокручивался вбок, но я бы предпочел, чтобы он обернул текст. Каждая строка ключ / значение находится внутри своего собственного div. Я пытался добавить различные версии word-wrap и overflow-wrap в разных местах (div, td и т. Д.)

Причина использования тега <div> внутри <td> заключалась в том, что это был единственный способ, с помощью которого я мог понять, как получить каждую из пар ключ / значение в одну строку. Если есть лучший способ получить новые строки, где я хочу их и обернуть в отдельный элемент, который будет работать. Любые идеи приветствуются.

Answer 1

Оказывается, я сфокусировался не на том. Элемент white-space:, вероятно, установлен на no-wrap где-то во всех моих унаследованных CSS. Я просто установил стиль для <td> таким образом:

<td style="white-space: initial; overflow: auto">

и теперь он работает отлично.