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

get text width

P: n/a
Is there a way to know the overall width of a piece of text? Not the
width of, say, a single line P tag but any words it may contain.

I've been given a problem where text that is dynamically created is
supposed to be neatly wrapped in a styled DIV.

Andrew Poulos
Aug 25 '06 #1
Share this Question
Share on Google+
4 Replies


P: n/a


Andrew Poulos wrote:
Is there a way to know the overall width of a piece of text? Not the
width of, say, a single line P tag but any words it may contain.

I've been given a problem where text that is dynamically created is
supposed to be neatly wrapped in a styled DIV.
The browser and its HTML rendering engine will do the neat wrapping of
any contents the div contains. Or what exactly are you trying to achieve
that the browser does not do for your?

I don't really understand what you are looking for but besides the cross
browser offsetWidth/offsetHeight properties of element nodes IE/Win has
some special objects to find the bounding box of text, see the example
<http://msdn.microsoft.com/workshop/samples/author/dhtml/refs/rectdemo.htm>
and the documentation
<http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/reference/objects/textrectangle.asp>

--

Martin Honnen
http://JavaScript.FAQTs.com/
Aug 25 '06 #2

P: n/a
On Friday 25 August 2006 13:44, Andrew Poulos [ap*****@hotmail.com] wrote in
message <44**********************@per-qv1-newsreader-01.iinet.net.au>
Is there a way to know the overall width of a piece of text? Not the
width of, say, a single line P tag but any words it may contain.

I've been given a problem where text that is dynamically created is
supposed to be neatly wrapped in a styled DIV.
Do you have an example where the text isn't neatly wrapped? Unless you've
got very long words, a large text size and very little space there
shouldn't be a problem wrapping text.

The following CSS properties can be used for wrapping text.

text-align:left
should wrap text leaving the right 'ragged-right', this is usually the
default.

text-align:justify
should pad out the word spacing so that the left and right edges of the text
are all neatly aligned.

eg:
<p style="text-align:justify">Lorem Ipsum etc...</p>
Aug 25 '06 #3

P: n/a
Andrew Poulos wrote:
Is there a way to know the overall width of a piece of text?
Not a good way, and generally you shouldn't want to do this. But if
necessary you can put the text into something that will "shrink wrap"
it, such as a float or an absolutely-positioned element, and then find
that element's offsetWidth. (IIRC, offsetWidth was invented by
Microsoft and is non-standard, but is universally supported.)

Phil.
Aug 25 '06 #4

P: n/a
Martin Honnen wrote:
>

Andrew Poulos wrote:
>Is there a way to know the overall width of a piece of text? Not the
width of, say, a single line P tag but any words it may contain.

I've been given a problem where text that is dynamically created is
supposed to be neatly wrapped in a styled DIV.

The browser and its HTML rendering engine will do the neat wrapping of
any contents the div contains. Or what exactly are you trying to achieve
that the browser does not do for your?

I don't really understand what you are looking for but besides the cross
browser offsetWidth/offsetHeight properties of element nodes IE/Win has
some special objects to find the bounding box of text, see the example
<http://msdn.microsoft.com/workshop/samples/author/dhtml/refs/rectdemo.htm>
and the documentation
<http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/reference/objects/textrectangle.asp>

Hmm, when I get back in the office on Monday I'll recheck what I've
done. I have a coloured box that is supposed to shrink wrap around the
text. Initially, I think, I put a width value of 'auto' and didn't get
shrink-wrapping so I started looking for a way to code it.

Andrew Poulos
Aug 27 '06 #5

This discussion thread is closed

Replies have been disabled for this discussion.