How do you restrict a Template Field width inside a GridView?

Question

I need help restricting the 'Link target' column inside this gridview. If a long URL string is entered the page will stretch outside of the panel and give the webpage a deformed look.

I can restrict the column width by setting the HeaderStyle width but it does not stop a long URL string. I can edit the width, but even with an adjusting width the cell will not restrict the size of the actual content.

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

I want to force the 'Link Target' row to a certain width and if the string exceeds that width, I want to have the rest of the string wrapped or hidden.

Answer 1

Try to add the following css class to hlLinkTarget and lbLinkTarget:

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