如何限制 GridView 中的模板字段宽度？答案

【问题标题】：How do you restrict a Template Field width inside a GridView?如何限制 GridView 中的模板字段宽度？
【发布时间】：2019-12-13 10:09:53
【问题描述】：

我需要帮助限制此网格视图内的“链接目标”列。如果输入一个长的 URL 字符串，页面将延伸到面板之外并给网页一个变形的外观。

我可以通过设置 HeaderStyle 宽度来限制列宽，但它不会停止长 URL 字符串。我可以编辑宽度，但即使调整宽度，单元格也不会限制实际内容的大小。

    <asp:GridView ID="gvRefLinks" runat="server" AutoGenerateColumns="False" CellPadding="4" DataKeyNames="PRL_ID" DataSourceID="sqlDsRefLinks" ForeColor="#333333" GridLines="None" Width="100%" AllowSorting="True">
        <AlternatingRowStyle BackColor="White" />
        <Columns>
            <asp:BoundField DataField="PRLT_TypeName" HeaderText="Link Type" SortExpression="PRLT_TypeName" >
            <HeaderStyle HorizontalAlign="Left" />
            </asp:BoundField>
            <asp:TemplateField HeaderText="Link Target" SortExpression="PRL_LinkTarget">
                <EditItemTemplate>
                    <asp:TextBox ID="TextBox1" runat="server" Text='<%# Bind("PRL_LinkTarget") %>'></asp:TextBox>
                </EditItemTemplate>
                <ItemTemplate>
                    <asp:HyperLink ID="hlLinkTarget" runat="server" Target="_blank" Text='<%# Eval("PRL_LinkTarget") %>' Visible="False"></asp:HyperLink>
                    <asp:LinkButton ID="lbLinkTarget" runat="server" CommandArgument='<%# Eval("PRL_LinkTarget") %>' CommandName="EPDM" Text='<%# Eval("PRL_LinkTarget") %>' Visible="False"></asp:LinkButton>
                </ItemTemplate>
                <HeaderStyle HorizontalAlign="Left" />
            </asp:TemplateField>
            <asp:BoundField DataField="PRL_Description" HeaderText="Link Description" SortExpression="PRL_Description" >
            <HeaderStyle HorizontalAlign="Left" />
            </asp:BoundField>
            <asp:CommandField ShowDeleteButton="True">
            <ItemStyle ForeColor="Blue" HorizontalAlign="Right" />
            </asp:CommandField>
        </Columns>
        <EditRowStyle BackColor="#2461BF" />
        <EmptyDataTemplate>
            No reference links have been specified for the current project.
        </EmptyDataTemplate>
        <FooterStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
        <HeaderStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" HorizontalAlign="Left" />
        <PagerStyle BackColor="#2461BF" ForeColor="White" HorizontalAlign="Center" />
        <RowStyle BackColor="#EFF3FB" />
        <SelectedRowStyle BackColor="#D1DDF1" Font-Bold="True" ForeColor="#333333" />
        <SortedAscendingCellStyle BackColor="#F5F7FB" />
        <SortedAscendingHeaderStyle BackColor="#6D95E1" />
        <SortedDescendingCellStyle BackColor="#E9EBEF" />
        <SortedDescendingHeaderStyle BackColor="#4870BE" />
    </asp:GridView>

我想将“链接目标”行强制为某个宽度，如果字符串超过该宽度，我希望将字符串的其余部分包裹或隐藏。

【问题讨论】：

标签： html asp.net vb.net gridview width

【解决方案1】：

尝试将以下css类添加到hlLinkTarget和lbLinkTarget：

    .truncate {
        width: 150px; /* set the desired width */
        display: inline-block;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

【讨论】：