: Estimate number of characters to truncate 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
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?
More posts by @Carla748
1 Comments
Sorted by latest first Latest Oldest Best
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: developer.mozilla.org/en-US/docs/Web/CSS/text-overflow
Terms of Use Create Support ticket Your support tickets Stock Market News! © vmapp.org2024 All Rights reserved.