Rails - 電子メールの文字列がテーブル内の単語の折り返しを拒否する

Question

私はしばらくこの問題を解決するために取り組んできました。

私は表示している部分があり、静的なデータがhtmlテーブルに表示されています。しかし、私のオブジェクトの電子メールフィールドは、テーブル全体を台無しにして、それをワードラップすることはできません。

私はテーブルに罫線を追加したので、何が起こっているのかをより簡単に確認できます。これは私のモニターに最大規模のページです：

は、当社及び協力会社での電子メールに注意してください。 もし私がページを縮小すると、テーブルはサイズ変更されず、何も単語が折り返されます。

フォームコードを取得して表示されなくなったら、すべて正常に動作します。ここでは会社のための電子メールや下請なしで、上の写真である：国境とスケールとワードラップ内

テーブルの滞在正しく。

私の部分のコードはこれです：

<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 

誰でも知っていますか？

Answer 1

これらの電子メールは単一の単語で構成されているため、ワードラップすることはできません。私はそれらの幅を制限し、それらを切り捨てることを提案します（まだツールチップに完全な値を公開しています）。これまでのところ、私は次の表 `{テーブルレイアウト行うことによって、ワードラップにそれらを余儀なくされてい

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

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