html - CSS 包装和隐藏表格中的文本

Question

这是我的表格:(在底部删除并添加了呈现的 HTML。)

<table style="width: 100%; white-space: nowrap; overflow: hidden;">
    <tbody><tr>
        <th>
            Department
        </th>
        <th>
            Function
        </th>
        <th>
            Process
        </th>
        <th style="max-width: 75px;">
            Procedure
        </th>
        <th>
        </th>
    </tr>
        <tr>
            <td>Legal Process</td>
            <td>Setup and Maintenance</td>
            <td>New placement scrub</td>
            <td>Review of newly placed accounts to determine if there is missing information or incorrect information before collection efforts are begun</td>

            <td align="center"><a href="/MasterList/Details/1">Details</a></td>
        </tr>
        <tr>
            <td>Legal Process</td>
            <td>Setup and Maintenance</td>
            <td>685 Queue/ Midland chargeoff balance issue</td>
            <td>Review and correction of Midland accounts that where placed with differing charge off and current principal balances</td>

            <td align="center"><a href="/MasterList/Details/2">Details</a></td>
        </tr>
        <tr>
            <td>Legal Process</td>
            <td>Lawsuit and Judgment Process</td>
            <td>Skip Trace</td>
            <td>Re-Serve Request CA</td>

            <td align="center"><a href="/MasterList/Details/3">Details</a></td>
        </tr>
        <tr>
            <td>Legal Process</td>
            <td>Lawsuit and Judgment Process</td>
            <td>Skip Trace</td>
            <td>Re-serve Request ID</td>

            <td align="center"><a href="/MasterList/Details/4">Details</a></td>
        </tr>
        <tr>
            <td>Legal Process</td>
            <td>Lawsuit and Judgment Process</td>
            <td>Suit Referral</td>
            <td>Barclays Suit Referral</td>

            <td align="center"><a href="/MasterList/Details/5">Details</a></td>
        </tr>
        <tr>
            <td>Legal Process</td>
            <td>Lawsuit and Judgment Process</td>
            <td>Suit Referral</td>
            <td>Capital One CRS Procedure</td>

            <td align="center"><a href="/MasterList/Details/6">Details</a></td>
        </tr>
        <tr>
            <td>Litigation Support</td>
            <td>Admin Mailroom &amp; Doc Production</td>
            <td>Oregon ten day demand letter</td>
            <td>Ten day demand letter is sent to the debtor</td>

            <td align="center"><a href="/MasterList/Details/7">Details</a></td>
        </tr>
        <tr>
            <td>Litigation Support</td>
            <td>Admin Mailroom &amp; Doc Production</td>
            <td>Oregon debtor exam</td>
            <td>Debtor exam  forwarded to court for issuing</td>

            <td align="center"><a href="/MasterList/Details/8">Details</a></td>
        </tr>
        <tr>
            <td>Litigation Support</td>
            <td>Admin Mailroom &amp; Doc Production</td>
            <td>Oregon debtor exam</td>
            <td>Debtor exam returned from court and forwarded to the Process Server for service</td>

            <td align="center"><a href="/MasterList/Details/9">Details</a></td>
        </tr>
        <tr>
            <td>Litigation Support</td>
            <td>Lawsuit and Judgment Process</td>
            <td>Oregon subpoena </td>
            <td>Subpoena forwarded to the Process Server for service</td>

            <td align="center"><a href="/MasterList/Details/10">Details</a></td>
        </tr>
        <tr>
            <td>Finance</td>
            <td>H/R - Payroll</td>
            <td>Benefits</td>
            <td>Benefits Signup</td>

            <td align="center"><a href="/MasterList/Details/11">Details</a></td>
        </tr>
        <tr>
            <td>Finance</td>
            <td>H/R - Payroll</td>
            <td>Benefits</td>
            <td>Benefits Summary</td>

            <td align="center"><a href="/MasterList/Details/12">Details</a></td>
        </tr>
        <tr>
            <td>Finance</td>
            <td>H/R - Payroll</td>
            <td>New Hire</td>
            <td>Background Check</td>

            <td align="center"><a href="/MasterList/Details/13">Details</a></td>
        </tr>
        <tr>
            <td>Finance</td>
            <td>H/R - Payroll</td>
            <td>New Hire</td>
            <td>ISI Orientation - Drug Test</td>

            <td align="center"><a href="/MasterList/Details/14">Details</a></td>
        </tr>
        <tr>
            <td>Finance</td>
            <td>Processing</td>
            <td>Client Remittances</td>
            <td>Asset Acceptance Remit</td>

            <td align="center"><a href="/MasterList/Details/15">Details</a></td>
        </tr>
        <tr>
            <td>Finance</td>
            <td>Processing</td>
            <td>Client Remittances</td>
            <td>End of Month Remits</td>

            <td align="center"><a href="/MasterList/Details/16">Details</a></td>
        </tr>
        <tr>
            <td>Finance</td>
            <td>Processing</td>
            <td>Cost Audits</td>
            <td>Internal Cost Audits</td>

            <td align="center"><a href="/MasterList/Details/17">Details</a></td>
        </tr>
        <tr>
            <td>Finance</td>
            <td>Processing</td>
            <td>Cost Audits</td>
            <td>Weekly Cost Duplicates</td>

            <td align="center"><a href="/MasterList/Details/18">Details</a></td>
        </tr>
</tbody></table>

目前它没有换行文本，所以表格看起来漂亮干净。但是，我有一些非常长的过程名称，因此该表被推离了页面。

我想要发生的是:如果名称长于单元格的宽度，它会隐藏文本。

我真的只希望程序有宽度限制。

除了 asp.net MVC4 入门模板中包含的内容之外，我没有向该元素添加任何其他 CSS。

Answer 1

如果您可以向每个“过程”列(以及标题)添加一个类，如下所示:

 <tr>
   <td>Litigation Support</td>
   <td>Admin Mailroom &amp; Doc Production</td>
   <td>Oregon debtor exam</td>
   <td class="proc">Debtor exam  forwarded to court for issuing</td>

   <td align="center"><a href="/MasterList/Details/8">Details</a></td>
 </tr>

你可以像这样控制文本:

.proc {
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 150px;
}

.proc {
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 150px;
}

<table style="width: 100%; white-space: nowrap; overflow: hidden;">
  <tbody>
    <tr>
      <th>
        Department
      </th>
      <th>
        Function
      </th>
      <th>
        Process
      </th>
      <th class="proc">
        Procedure
      </th>
      <th>
      </th>
    </tr>
    <tr>
      <td>Legal Process</td>
      <td>Setup and Maintenance</td>
      <td>New placement scrub</td>
      <td class="proc">Review of newly placed accounts to determine if there is missing information or incorrect information before collection efforts are begun</td>

      <td align="center"><a href="/MasterList/Details/1">Details</a></td>
    </tr>
    <tr>
      <td>Legal Process</td>
      <td>Setup and Maintenance</td>
      <td>685 Queue/ Midland chargeoff balance issue</td>
      <td class="proc">Review and correction of Midland accounts that where placed with differing charge off and current principal balances</td>

      <td align="center"><a href="/MasterList/Details/2">Details</a></td>
    </tr>
    <tr>
      <td>Legal Process</td>
      <td>Lawsuit and Judgment Process</td>
      <td>Skip Trace</td>
      <td class="proc">Re-Serve Request CA</td>

      <td align="center"><a href="/MasterList/Details/3">Details</a></td>
    </tr>
    <tr>
      <td>Legal Process</td>
      <td>Lawsuit and Judgment Process</td>
      <td>Skip Trace</td>
      <td class="proc">Re-serve Request ID</td>

      <td align="center"><a href="/MasterList/Details/4">Details</a></td>
    </tr>
    <tr>
      <td>Legal Process</td>
      <td>Lawsuit and Judgment Process</td>
      <td>Suit Referral</td>
      <td class="proc">Barclays Suit Referral</td>

      <td align="center"><a href="/MasterList/Details/5">Details</a></td>
    </tr>
    <tr>
      <td>Legal Process</td>
      <td>Lawsuit and Judgment Process</td>
      <td>Suit Referral</td>
      <td class="proc">Capital One CRS Procedure</td>

      <td align="center"><a href="/MasterList/Details/6">Details</a></td>
    </tr>

  </tbody>
</table>