Cody Pritchard Cody Pritchard - 21 days ago 5
CSS Question

Rails - Email string refuses to word wrap inside table

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:

enter image description here

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

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:

enter image description here

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

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>