html - 单元格中 内的 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 中。我尝试添加各种版本的 word-wrap和 overflow-wrap在不同的地方(div、td 等)

使用 <div> 的原因<td> 内的标签这是我能想出将每个键/值对放在一行上的唯一方法吗？如果有更好的方法在我想要的地方获取换行符，并在单个元素中换行，那将是可行的。任何想法表示赞赏。

Answer 1

原来我关注的是错误的事情。元素 white-space:可能设置为 no-wrap在我所有继承的 CSS 中的某个地方。我只是为 <td> 设置了样式因此:

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

现在一切正常。