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

Here is my table: (removed and added rendered HTML at the bottom.)

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

Currently it isn't wrapping the text so the table looks nice and clean. However I have some REALLY long Procedures names and so the table is pushed off the page.

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

What I want to happen is: if the name is longer than the width of the cell it hides the text.

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

I really only want the procedure to have width constrains.

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

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

I have added no additional CSS to this project outside of what is included in the asp.net MVC4 starter template.

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

3 个解决方案

#1

If you can add a class to each "procedure" column (and the header, as well), like so:

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

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

you can reign the text in like so:

你可以像这样统治文本:

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

#2

Part of the problem is that display:table is by nature flexible - that is, the size of the table contents is what determines the size of the table. If you want to make sure your table is exactly the size you define, you need to set {table-layout:fixed} as part of your table's CSS rule. That carries the additional requirement of specifying a width for at least n-1 of n table columns, or the table will automatically give equal space to each column. I recommend setting each column width in percentages aside from the last column, which will automatically take up the remaining space not given to the other columns. Then use Paul Roub's solution to cut off the remaining content that doesn't fit into the column width. The text-overflow:ellipsis property is not supported in all browsers, but it's the best you're going to get without resorting to javascript. That said, if you do want to resort to javascript, I highly recommend the "dotdotdot" library: http://dotdotdot.frebsite.nl/

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

#3

A working fiddle here

这是一个工作小提琴

//css

.thetable>tbody>tr>td+td+td+td {
    overflow:hidden;
    max-width:200px;
    white-space:nowrap;
}

#1

If you can add a class to each "procedure" column (and the header, as well), like so:

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

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

you can reign the text in like so:

你可以像这样统治文本:

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

#2

#3

A working fiddle here

这是一个工作小提琴

//css

.thetable>tbody>tr>td+td+td+td {
    overflow:hidden;
    max-width:200px;
    white-space:nowrap;
}

秒客网

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

3 个解决方案

#1

#2

#3

#1

#2

#3

相关文章