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

时间：2013-05-08 17:23:36

标签： html css html5 css3

这是我的表:(删除并在底部添加了呈现的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>

目前它没有包装文本，因此表格看起来很干净。但是我有一些非常长的程序名称，所以表格被推离页面。

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

我真的只希望程序有宽度约束。

enter image description here

除了asp.net MVC4入门模板中包含的内容外，我没有为此项目添加额外的CSS。

3 个答案:

答案 0 :(得分：6)

如果你可以为每个“procedure”列（以及标题）添加一个类，如下所示：

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

答案 1 :(得分：1)

部分问题是display：table本质上是灵活的 - 也就是说，表内容的大小决定了表的大小。如果您想确保您的表格与您定义的大小完全相同，则需要将{table-layout:fixed}设置为表格CSS规则的一部分。这带来了额外的要求，即为n个表列中的至少n-1指定宽度，或者表将自动为每列提供相等的空间。我建议将每列宽度设置为除最后一列之外的百分比，这将自动占用未给予其他列的剩余空间。然后使用Paul Roub的解决方案来切除不适合列宽的剩余内容。并非所有浏览器都支持text-overflow:ellipsis属性，但它是您在不使用javascript的情况下获得的最佳选择。也就是说，如果您确实想使用javascript，我强烈推荐使用“dotdotdot”库：http://dotdotdot.frebsite.nl/

答案 2 :(得分：1)

工作fiddle here

// CSS 

.thetable>tbody>tr>td+td+td+td {
    overflow:hidden;
    max-width:200px;
    white-space:nowrap;
}
相关问题
最新问题