Rails - Email string refuses to word wrap inside table

Question

I have been working on fixing this for some time and nothing I have tried has made a difference.

I have a partial that I'm displaying and it just has static data being displayed in html tables. But the email field for my object is messing up the entire table and not allowing it to word-wrap.

I have added borders to the tables so you can more easily see whats happening. This is the page at maximum scale on my monitor:

Note the email in Company and Subcontractor. If I scale down the page, the tables do not resize and nothing word wraps like so:

But if I simply got to the form code and remove the emails from getting displayed, everything works properly. Here is the above picture, without emails for Company and Subcontractor:

The table stay within their borders and scale and word-wrap properly.

The code for my partial is this:

    <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 -->

That is for the Company, and Subcontractor is exactly the same but it is @job.subcontractor.email instead.

The migration files for Company and Subcontractor are also identical like so:

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

Does anyone know why the email string is messing up my tables and stopping them from word-wrapping and displaying properly?

Answer 1

Those emails can't be word-wrapped because they consist of a single word. I suggest limiting their width and truncating them (while still exposing full value in a tooltip).

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

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