Tutorial :C# - How can I cut a string at its end to fit in a div?


I'm making a list of recent news. So, it will show something like this:

- Take a look at the new Volks...  - John Doe is looking for a jo...  - Microsoft is launching the n...  

So, the list above only shows me the title of the news and the length of each news is limited in 25 characters. But, this is not working well... for example, if you type 25 M's, it will explode my div.

I've been told that there is a way to calculate the length of the string and make it fit in a div automatically.

Does anyone know how to do it?



I think you talking about is using the System.Drawing.Gaphics class's MeasureString() method.

However, this requires making a Graphics object which matches the font characteristics of your web page. But, your server process shouldn't know anything about the style elements of the web page, which should be handled by the CSS sheet.


"text-overflow: ellipsis" is what you want but not everybody supports it. More info here...


I think you want to use css for this.


should do it


One very simple way to prevent "exploding the div" is to use a css style to set the overflow of the div to scroll or hide the extra text instead of stretching to accomodate it.


I don't think there is an easy way to do this that works with all browsers and fonts. The best way is just making sure your layout don't break if someone enters 25*m.

An useful thing to do is to split words that are more than X letter. I the word-wrap css don't work that well on all browers.


This is not really a server-side problem, as the server shouldn't know what fonts people are using. You can do it using Ajax - post the font to the server, calculate the width (as James Curran mentioned), and return the right strings. However, the server may ont have the same fonts installed, and you have to calculate padding and margins on the server side.

I can think of several options on the client side:

  1. Wrap every line with a span. A span would expand automatically to the width of the line. Using jQuery or your favorite javascript you can remove characters until the width is ok. (you can do a sort of binary search, where at every stage you add the ellipsis and checks the width)
  2. Easy - Wrap every line with a fixed-width div and set it overflow:hidden, and add the ellipsis after the div. This will cut through letters though, and when you get a short text it'll still show the ellipsis.
  3. Too easy - Use a fixed width font (they're mostly ugly).


As others have mentioned you can measure strings in thick client applications using System.Drawing.Graphics.MeasureString, but since you mention you want to fit it in an HTML div tag it would be perferable to let the browser handle the user interface using CSS.

<html>  <head>      <title>C# - How can I cut a string at its end to fit in a div? </title>      <style type="text/css">          .ellipsis li          {             display: block;               white-space: nowrap;              overflow: hidden;              text-overflow: ellipsis;              width: 166px;          }      </style>  </head>  <body>      <ul class="ellipsis">          <li>Take a look at the new Volksxxxxx</li>          <li>John Doe is looking for a joxxxxx</li>          <li>Microsoft is launching the nxxxxx</li>      </ul>  </body>  </html>  

I used the unordered list tag (UL) instead of div since your sample list begins with a bullet character. Similar CSS would apply to DIV tags. And although all browser can be made to clip the content, not all browsers support the non-standard text-overflow: ellipsis style.

Note:If u also have question or solution just comment us below or mail us on toontricks1994@gmail.com
Next Post »