Question

在第四行的日历小部件中有大文本，因此它不适合单行，因此其大小正在增加＆amp; “查看全部”按钮也与窗口小部件的边缘重叠。行数是固定的，这意味着它一次最多可以显示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;

border：none; font-size：0px; line-height：0px;“OnClick =”btnRebind_Click“/＆gt;

          <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>插入单元格，如下所示：

＆＃13;

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

＆＃13;

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

＆＃13;

保持大小固定即使td内部有大量内容

1 个答案: