By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
440,130 Members | 2,228 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 440,130 IT Pros & Developers. It's quick & easy.

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

P: n/a
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
Share this Question
Share on Google+
1 Reply


P: n/a
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.