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

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