Accounting for the length of an HTML DIV for truncating text

then I want it to be cut down and the last 3 characters replaced with a "...". Currently I have the following:

<div id="fileName" class="field-row" title="<%= fileName %>">
    <% if(fileName.Length > 20) { %>
        Filename: <%= fileName.Substring(0,20) %>...
    <% } else { %>
        Filename: <%= fileName %>
    <% } %>
</div>

This works fine but if I have a file name that is made up of i's vs. W's then the div will have unused space on the right.

For example:

"iiiiiiiiii.jpg"

is shorter than:

"WWWWWWWWWW.jpg"

...even though they have the same number of characters.

Is there a better way to do this that accounts for the length of the

поделиться