Graphic Design Stack Exchange is a question and answer site for Graphic Design professionals, students, and enthusiasts. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

In website I am implementing I found that the maximum number of characters that I can display in a certain sidebar div is 17 M (uppercase M) plus the elipses. So that is the maximum I setup the code to produce ... if the text is longer than 17 characters it will be truncated and an elipses will be attached to the end.

That string for reference is a "Project Name". Practically users will not be calling their project "MMMMMMMMM...17 times" and hence when placed in the real world seemingly short project names that would essentially fit are being truncated.

A designer I know uses "00000..." to measure the width of a box. Is there a systematic/statistical approach to this?

share|improve this question
perhaps I should cross list this question in – Pykler May 21 '13 at 21:07
You can't give the box a fixed width? In JS I'd normally use just a character count. Why do you need the box to act this way? – Yisela May 21 '13 at 21:45
Possible Solution Here:… – Ryan May 21 '13 at 21:52
up vote 3 down vote accepted

The width would depend on the font itself, the widest character in said font, and the size the font is being rendered on screen.

Unfortunately, there is no way for you to know for certain any of that information. You can certainly set up the parameters, but in the end, they can all be over-ridden by the end user.

I'd suggest you instead use CSS to handle the truncation for you as that will handle much of the variability that a hard-coded count can't. An additional benefit is that the entire content is still rendered in the DOM, so is much more accessible and search engine friendly:

text-overflow: ellipsis;

More info:

share|improve this answer
I've found CSS to be a very viable option since the back-end doesn't have to change. Often with things like jEditable to edit tables in the DOM, if you truncate via back-end scripting, DOM editing presents real issues. None of that is present if you simply use CSS to truncate. – Scott May 21 '13 at 23:45

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.