Rails - 电子邮件字符串拒绝在 table 内自动换行

Question

一段时间以来，我一直在努力解决这个问题，但我尝试过的任何事情都没有起到任何作用。

我有一部分正在显示，它只是在 html table 中显示静态数据。但是我的对象的电子邮件字段弄乱了整个 table 并且不允许它自动换行。

我在 table 中添加了边框，这样您就可以更轻松地看到发生了什么。这是我显示器上最大比例的页面：

注意公司和分包商中的电子邮件。如果我缩小页面，tables 不会调整大小，也不会像这样自动换行：

但如果我只是获取表单代码并删除显示的电子邮件，一切正常。这是上面的图片，没有公司和分包商的电子邮件：

table 保持在其边界内并正确缩放和自动换行。

我的部分代码是这样的：

    <div class="row">
      <div class="large-4 columns">
        <div class="label_style">
          <h4 id="label_style">Company</h4>
        </div>
        <div class="table">
          <table>
            <tr>
              <td id="job_info"><strong>Name</strong></td>
              <td id="job_info"> <%= @job.company.name %> </td>
            </tr>
            <tr>
              <td id="job_info"><strong>Phone</strong></td>
              <td id="job_info"> <%= @job.company.phone %> </td>
            </tr>
            <tr>
              <td id="job_info"><strong>Street</strong></td>
              <td id="job_info"> <%= @job.company.street %> </td>
            </tr>
            <tr>
              <td id="job_info"><strong>City</strong></td>
              <td id="job_info"> <%= @job.company.city %> </td>
            </tr>
            <tr>
              <td id="job_info"><strong>State</strong></td>
              <td id="job_info"> <%= @job.company.state %> </td>
            </tr>
            <tr>
              <td id="job_info"><strong>Zip</strong></td>
              <td id="job_info"> <%= @job.company.zip %> </td>
            </tr>
            <tr>
              <td id="job_info"><strong>Email</strong></td>
              <td id="job_info"> <%= @job.company.email %> </td>
            </tr>
            <tr>
              <td id="job_info"><strong>Website</strong></td>
              <td id="job_info"> <%= @job.company.website %> </td>
            </tr>
          </table>
        </div> <!-- closing table -->
      </div> <!-- closing columns -->

那是公司的，分包商也是一样的，只不过是@job.subcontractor.email。

公司和分包商的迁移文件也一样：

class CreateCompanies < ActiveRecord::Migration
  def change
    create_table :companies do |t|
      t.string :name
      t.string :phone
      t.string :street
      t.string :city
      t.string :state
      t.string :zip
      t.string :email
      t.string :website

      t.timestamps null: false
    end
  end
end

有谁知道为什么电子邮件字符串会弄乱我的 table 并阻止它们正确换行和显示？

Answer 1

这些电子邮件不能自动换行，因为它们只包含一个单词。我建议限制它们的宽度并截断它们（同时仍然在工具提示中显示完整值）。

.email {
  max-width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
}

  <div class='email' title='aasdfasdfasgdf@gmail.com'>aasdfasdfasgdf@gmail.com</div>

Rails - 电子邮件字符串拒绝在 table 内自动换行

Rails - Email string refuses to word wrap inside table

html

css

ruby-on-rails

word-wrap