Finding How Many Letter Div Fit

I have a div with some standard width/height.. What css parametrs should i know, to calculate how many letters the div fit with no overflow? I think that the following parametrs ar

Solution 1:

How many characters can be fit into a div is very difficult to measure because different browsers have different rendering methods, different osses and even graphic adapters may render antialiasing slightly different. Another factor whic may play a role are the pixels per inch, the output display can show. Beside this, the font itself and the text plays a role, because you normally won't deal with fixed with fonts. So you need to know a lot about used hardware, software and in-depth font parameters, which is motsly out of scope from within javascript.

Anyhow there might be a way...

Depending on what you want to know you may use a hidden tag with fixed width and height and the scrollLeft and scrollTop-Properties to find out if the text exceeds the tag dimensions. This can be achieved by setting the scrollLeft and/or the scrollTop-Properties to very high values (e.g. 99999) which will then replaced by the browser with the real values. These values are 0 or greater than 0. If they are greater than 0, the value represents the number of pixels, the text will overflow.

Important for the hidden field is, that it must be added to the document node tree (with appendChild)

You might create a loop to fill in characters (or your text) into your hidden filed which exactly has the same properties (use cloneNode(true)) as the source tag/field. Within the loop you'll check the scrollLeft/scrollTop for overflows. If it overflows, you'll have the maximum text, the tag can show. To speed up things a bit you might want to move the hidden tag out of the browser view (e.g. left: 10000px;).

After measuring you may remove the hidden tag from the node tree. Be careful with extensive use - the implementation can be relatively fast - but if you want to perform dozens of checks on the client side in frontend-situations, the user experience may decrease rapidly depending on browser type, processor speed and system load on the client side.

Solution 2:

First let's assume you have a fixed css on the divs:

widthheightline-heightfont-sizefont-family
etc.

I would write some javascript to fill this div many times with different text (maybe pulled form actual articles) and do this in different browsers. Each time calculate the maximum number of characters that fill, but do not overflow the div. Then you have an upper bound on the number characters you need to send to always fill the div. Truncate each article in your slider to that number. You could add 10 characters if you want to ensure overflow and then use overflow hidden or ellipses or whatever.

Solution 3:

You can use getClientRects() on objects that already have been drawn on the screen, but I assume you want to calculate this before rendering, yes?

Edit: Oh, I just noticed that you said you can't use Javascript. Sorry, I assumed you did mean with Javascript. That changes the problem. Server side, you won't know which font the browser will use, whether it will round off the width of each character to whole pixels or not, etc.