即使 td 里面有很大的内容，也保持大小固定

Question

在第四行的日历小部件中，有大文本，因此它不适合单行，因此它的大小正在增加，并且查看全部按钮也与小部件的边缘重叠。行数是固定的，这意味着它一次最多可以显示 5 行，但每行的内容可能有更大的文本。所以当它不适合单行时，它会给我带来麻烦。我尝试了一些 css 技巧，但没有奏效。我需要帮助来确定其内容的大小，以便设计运行良好。我是 dot net 开发人员，但不是设计师，所以对 css 设计没有那么多专家。请帮帮我。

这是我的 aspx 代码。

<table style="border: 0px; width: 500px;">
      <tr>
        <td style="width: 55px;"><img alt="" src="/Images/DeptIcons/Administration.png" /></td>
        <td class="deptHeader">Calendar Editor</td>
      </tr>
    </table>
    <hr style="border-top: 1px solid #79767b; margin-bottom: 20px;" />
    <div style="position: relative;"><img alt="" src="/Images/ctnrTop.png" /></div>
    <div style="background-image: url('/Images/ctnrBG.gif'); position: relative; margin-top: -5px; padding: 15px 0px 0px 15px;" class="cntrFont">
        <table width="927" cellpadding="0" cellspacing="0">
          <tr>
            <td></td>
          </tr>
          <tr>
            <td>

    <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
        <Triggers>
            <asp:AsyncPostBackTrigger ControlID="btnRebind" EventName="Click" />
        </Triggers>
        <ContentTemplate>
            <asp:Button UseSubmitBehavior="false" ID="btnRebind" runat="server" Style="display: none; width: 0px; height: 0px;
 border: none; font-size: 0px; line-height: 0px;" OnClick="btnRebind_Click" />

              <table cellpadding="4" cellspacing="0">
                <tr>
                  <td colspan="4" align="right"><input type="button" onclick="addResult()" value="Add Calendar Event" class="fancyButton" /></td>
                </tr>
                <tr>
                  <td style="width: 30px; text-align: center;"></td>
                  <td style="width: 180px;"><b>Event Name</b></td>
                  <td style="width: 160px;"><b>Event Date</b></td>
                  <td></td>
                </tr>
                <asp:Repeater ID="rptEvents" runat="server">
                  <ItemTemplate>
                    <tr>
                        <td style="width: 30px; text-align: center;"><img src="../Images/icoStar.png" style="width: 15px; height: 15px; margin-top: 4px;" alt="Event" /></td>
                        <td><a class="calendarName" href="javascript:void(0);" onclick='showSearchResult(<%#Eval("CalID")%>,1);'><%# DataBinder.Eval(Container.DataItem, "calEvent")%></a></td>
                        <td><%# Convert.ToDateTime(Eval("calEventDate").ToString()).ToString("MMMM dd yyyy") %></td>
                        <td></td>
                    </tr>                  
                  </ItemTemplate>
                </asp:Repeater>
              </table>
            </td>
          </tr>
        </table>
    </div>      

<table style="border: 0px; width: 500px;">
  <tr>
    <td style="width: 55px;"><img alt="" src="/Images/DeptIcons/Administration.png" /></td>
    <td class="deptHeader">Calendar Editor</td>
  </tr>
</table>
<hr style="border-top: 1px solid #79767b; margin-bottom: 20px;" />
<div style="position: relative;"><img alt="" src="/Images/ctnrTop.png" /></div>
<div style="background-image: url('/Images/ctnrBG.gif'); position: relative; margin-top: -5px; padding: 15px 0px 0px 15px;" class="cntrFont">
    <table width="927" cellpadding="0" cellspacing="0">
      <tr>
        <td></td>
      </tr>
      <tr>
        <td>

<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
    <Triggers>
        <asp:AsyncPostBackTrigger ControlID="btnRebind" EventName="Click" />
    </Triggers>
    <ContentTemplate>
        <asp:Button UseSubmitBehavior="false" ID="btnRebind" runat="server" Style="display: none; width: 0px; height: 0px;

边框：无；字体大小：0px； line-height: 0px;" OnClick="btnRebind_Click" />

          <table cellpadding="4" cellspacing="0">
            <tr>
              <td colspan="4" align="right"><input type="button" onclick="addResult()" value="Add Calendar Event" class="fancyButton" /></td>
            </tr>
            <tr>
              <td style="width: 30px; text-align: center;"></td>
              <td style="width: 180px;"><b>Event Name</b></td>
              <td style="width: 160px;"><b>Event Date</b></td>
              <td></td>
            </tr>
            <asp:Repeater ID="rptEvents" runat="server">
              <ItemTemplate>
                <tr>
                    <td style="width: 30px; text-align: center;"><img src="../Images/icoStar.png" style="width: 15px; height: 15px; margin-top: 4px;" alt="Event" /></td>
                    <td> <div title="<%# DataBinder.Eval(Container.DataItem, "calEvent")%>" style="width: 180px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis"><a class="calendarName" href="javascript:void(0);" onclick='showSearchResult(<%#Eval("CalID")%>,1);'><%# DataBinder.Eval(Container.DataItem, "calEvent")%></a></div></td>
                    <td><%# Convert.ToDateTime(Eval("calEventDate").ToString()).ToString("MMMM dd yyyy") %></td>
                    <td></td>
                </tr>                  
              </ItemTemplate>
            </asp:Repeater>
          </table>
        </td>
      </tr>
    </table>
</div>      

Answer 1

您可能想看看将text-overflow: ellipsis css 规则与overflow: hidden 结合使用。为此，单元格还必须具有固定宽度，并且whitespace: nowrap 告诉它不要换行长文本。这将显示更多文本，您可以将单元格标题设置为全文内容，以便鼠标悬停会提示条目的名称。请使用外部 css 文件。我只是把这个内联作为例子。

           <asp:Repeater ID="rptEvents" runat="server">
              <ItemTemplate>
                <tr>
                    <td style="width: 30px; text-align: center;"><img src="../Images/icoStar.png" style="width: 15px; height: 15px; margin-top: 4px;" alt="Event" /></td>
                    <td title="<%# DataBinder.Eval(Container.DataItem, "calEvent")%>" style="width: 300px;  white-space: nowrap; overflow: hidden; text-overflow: ellipsis"><a class="calendarName" href="javascript:void(0);" onclick='showSearchResult(<%#Eval("CalID")%>,1);'><%# DataBinder.Eval(Container.DataItem, "calEvent")%></a></td>
                    <td><%# Convert.ToDateTime(Eval("calEventDate").ToString()).ToString("MMMM dd yyyy") %></td>
                    <td></td>
                </tr>                  
              </ItemTemplate>
            </asp:Repeater>

编辑：抱歉，我的错误...这些 css 规则不适用于 <td>。您可能想开始考虑完全删除表格以支持<div>s，或在单元格中插入<div>，如下所示：

table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
}

td {
  padding: 5px;
  border: 1px solid;
  margin: 0;
}

td:first-of-type {
  width: 30px;
}

.event-name {
  max-width: 200px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;  
}

<html>
  <head>
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>
  </head>
  <body>
    <table>
      <tr>
        <td><i class="fa fa-star"></i></td>
        <td><div title="This is a very loooooooong text! There can be nothing longer than it" class="event-name">This is a very loooooooong text! There can be nothing longer than it</div></td>
        <td>Friday, August 19, 2016</td>
        <td></td>
      </tr>
    </table>
  </body>
</html>