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:可能在我继承的所有CSS中的某处设置为no-wrap。我只是设置了<td>的样式：

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

现在它完美无缺。

Rails在未包装的单元格中的<div>内部引导文本

1 个答案: