Last post Aug 28, 2017 08:27 AM by Billy Liu
Aug 17, 2017 11:29 AM|Yeoman|LINK
when you use tables or grid views you often have the problem that there are some long strings which make one column very wide.
I would prefer that such strings are truncated with a "..." at the end.
To be more concrete, you have a label with a fixed width.
When it's rendered text becomes wider than the maximum width, it should be truncated like this:
I guess the most important challenge here is that you may have different (proportional) fonts, so you cannot simply count the number of characters in the string.
Is there any solution for this?
Aug 17, 2017 11:36 AM|PatriceSc|LINK
Start perhaps by trying https://www.w3schools.com/cssref/css3_pr_text-overflow.asp
Aug 18, 2017 12:02 PM|markfitzme|LINK
Another problem is you're dealing with web-safe fonts and browsers. You aren't going to get the same experience for all browsers, even on the same platform. Some browsers have been known to handle font spacing and kerning differently than others so there's
no exact guarantee that any sort of calculation you would make to determine what the rendered size of the font is will actually translate into what it really is rendered at. That's mainly because in desktop development there is complete control (almost) of
how rendering occurs and you have direct access to font size determinations. Not so with the browser where the user's own preferences can affect the size and dimensions of a rendering nevermind inherited CSS properties from parent containers.
Aug 28, 2017 08:27 AM|Billy Liu|LINK
Please try to use the following code:
<form id="form1" runat="server">
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false" >
<asp:Label ID="Label1" runat="server" Font-Size="XX-Small" width="100px" CssClass="truncate" Text='<%#Eval("col1") %>'></asp:Label>
<asp:Label ID="Label2" runat="server" Font-Size="Large" width="100px" CssClass="truncate" Text='<%#Eval("col2") %>'></asp:Label>
In behind code:
protected void Page_Load(object sender, EventArgs e)
DataTable dt = new DataTable();
GridView1.DataSource = dt;
And the result is :