473,379 Members | 2,132 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,379 software developers and data experts.

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 6035
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 thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

13
by: Mikko Ohtamaa | last post by:
From XML specification: The representation of an empty element is either a start-tag immediately followed by an end-tag, or an empty-element tag. (This means that <foo></foo> is equal to...
3
by: Catherine Lynn Smith | last post by:
I am creating a webpage with dhtml <DIV> layers and I want a link on one layer to modify the content on another but I seem to keep running into errors. Basically I create a layer in the middle...
44
by: Jim M | last post by:
I have had great success with using <iframe> with overflow-y set to auto. I can get a similar look with the <iframe> tag. BUT... In all cases I need to have fixed heights. Is there a way to...
9
by: Wang, Jay | last post by:
Hello, all, I would like to enable some text between <SPAN url="http://www.testserver.com/">WORD TO BE DRAGGED </SPAN>. I put some javascript and it will extract http://www.testserver.com/ from...
14
by: Charlie T | last post by:
Hello, is there any way to get this to work? myID.innerHTML = "Hello" <DIV id="myID"></DIV> <DIV id="myID"></DIV>
5
by: hibernate | last post by:
I'm somewhat new to javascript/DHTML, and this problem has been plaguing me. I have made an 'array' of <div> tags within my html document like so: <div id="menu"> menu1 </div> <div id="menu">...
2
by: Richard Maher | last post by:
Hi, I'm trying to use the Visibility Style attribute for a Div to effectively PopUp a lightweight window with some additional context-sensitive information, when a user mouses over a given...
3
by: lilOlMe | last post by:
I'm using Ajax to help make my webpage appear to be smoother. When a control has submitted, I would like to prevent any controls within that control from resubmitting until the request has...
5
by: todpeeple | last post by:
Hi can any one plz tell me urgently... is it possible to make round corners of any box (such as <div>, <span>,<table>, or any box) in asp .net page programatically or declareatively without using...
1
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
0
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...
0
by: ryjfgjl | last post by:
In our work, we often need to import Excel data into databases (such as MySQL, SQL Server, Oracle) for data analysis and processing. Usually, we use database tools like Navicat or the Excel import...
0
by: taylorcarr | last post by:
A Canon printer is a smart device known for being advanced, efficient, and reliable. It is designed for home, office, and hybrid workspace use and can also be used for a variety of purposes. However,...
0
by: Charles Arthur | last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
0
by: ryjfgjl | last post by:
If we have dozens or hundreds of excel to import into the database, if we use the excel import function provided by database editors such as navicat, it will be extremely tedious and time-consuming...
1
by: nemocccc | last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
1
by: Sonnysonu | last post by:
This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...
0
by: Hystou | last post by:
There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.