<td> 单元格中 <div> 内的 Rails Bootstrap 文本不换行

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 内。我尝试在各个地方（div、td 等）添加各种版本的 word-wrap 和 overflow-wrap

在<td> 中使用<div> 标记的原因是，这是我能想出的将每个键/值对放在一行中的唯一方法。如果有更好的方法来获取我想要的换行符并在单个项目中进行换行。任何想法都表示赞赏。

Answer 1

原来我专注于错误的事情。在我所有继承的 CSS 中，元素 white-space: 可能设置为 no-wrap。我只是这样设置<td> 的样式：

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

现在它运行良好。