469,097 Members | 1,608 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,097 developers. It's quick & easy.

How to fit text to a <DIV>/<SPAN> of width X px / height Y px

I have a <spanof width X px and height Y px. I want to read the text
of an article, which is stored in a mySQL table, and pass to that
<spanonly just enough text to fit in it, along with a 'read more'
hyperlink which will take the user to the full article. I do not want
any overflow scroll bars to show. The font-size is set by external
stylesheet in em's.

How can I determine how much text is enough?

Approaches I've thought of:

-just set a semi-arbitrary number of characters, rounded to the
nearest full word, which allows the text to fit in the given space in
all browsers. Of course this approach won't take into account if the
user sets his browser's font size larger than usual.

-establish a table with em values for each character in a given font.
Calculate the width of each line of text by adding up the em values,
character by character, including letter spacing. Convert to pixels.
Compare to the allowed pixel width of each line. Do the same for
height, using line height instead of character width. Sounds like a
lot of work, though!

I've googled endlessly and haven't come up with very many ideas on how
to work this through...

anyone have any bright ideas? thx in adv

Oct 24 '07 #1
1 5789
ry****@gmail.com wrote:
I have a <spanof width X px and height Y px. I want to read the text
of an article, which is stored in a mySQL table, and pass to that
<spanonly just enough text to fit in it, along with a 'read more'
hyperlink which will take the user to the full article. I do not want
any overflow scroll bars to show. The font-size is set by external
stylesheet in em's.

How can I determine how much text is enough?

Approaches I've thought of:

-just set a semi-arbitrary number of characters, rounded to the
nearest full word, which allows the text to fit in the given space in
all browsers. Of course this approach won't take into account if the
user sets his browser's font size larger than usual.

-establish a table with em values for each character in a given font.
Calculate the width of each line of text by adding up the em values,
character by character, including letter spacing. Convert to pixels.
Compare to the allowed pixel width of each line. Do the same for
height, using line height instead of character width. Sounds like a
lot of work, though!

I've googled endlessly and haven't come up with very many ideas on how
to work this through...

anyone have any bright ideas? thx in adv

You can't. For that to work, you would have to control the font size on
the user's browser. And you can't do that with PHP. For instance, I'm
getting old, so when I use a high-res monitor, I am often using a larger
font size than the default - which on Firefox also overrides any font
size you set.

Better would be to just pick a certain number of characters and let the
span adjust to fit them.

--
==================
Remove the "x" from my email address
Jerry Stuckle
JDS Computer Training Corp.
js*******@attglobal.net
==================

Oct 24 '07 #2

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

3 posts views Thread by Catherine Lynn Smith | last post: by
2 posts views Thread by Richard Maher | last post: by
1 post views Thread by CARIGAR | last post: by
reply views Thread by zhoujie | last post: by
reply views Thread by kglaser89 | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.