This is really embarrassing but I can't figure out how to use the CSS
command 'width'. I want to be able to use it in the context of an
embedded command, as follows.  Imagine I write: "<span
style="width:25px">The fox jumped over the lazy dog.</span>".  Ideally
that sentence would then appear formatted to a width of 25 (or
whatever) pixels.  The manuals and the online sites all make me think
this should be possible.  But nothing I do works. I'm beginning to
wonder if "width" doesn't work as an embedded command.  But surely
that is wrong.

---

Clarification of Question by hapgood-ga on 10 Nov 2006 13:46 PST

Whoops.  I see that what I want to do is called 'inline,' not 'embedded'.
Embedded means the command is at the top of the HTML document.  I want
to put the command next to the text it is supposed to control.  That
relationship is called 'inline'.

---

Request for Question Clarification by aht-ga on 10 Nov 2006 21:54 PST

hapgood-ga:

Can you clarify what exactly it is you are expecting to see when you
use the width property as the inline style for the span?

For example, are you expecting that the font size will automatically
change in order to fit the sentence into the width? If so, then that
is not what the width property will do, all it does it help the
browser decide when a new line is needed. If a word in the span is
longer than the space defined by the width property, that word will
not be truncated or scaled to fit; instead, the browser will go to a
new line after the word. So, the example you included above works
absolutely as designed.

Can you please tell us what you are expecting to see, so that we can
advise you accordingly?

Regards,

aht-ga
Google Answers Researcher

---

Clarification of Question by hapgood-ga on 11 Nov 2006 15:05 PST

> Can you clarify what exactly it is you are expecting to see when you
> use the width property as the inline style for the span?

> For example, are you expecting that the font size will automatically
> change in order to fit the sentence into the width?

Not at all.  I'm expecting the sentence to be reformatted into
a single column like this:

I'm
expecting 
the 
sentence
to be
reformatted
into a 
single 
column.

> So, the example you included above works absolutely as designed.

It doesn't for me. To repeat: if I type the code "<span
style="width:25px">This is a sentence.</span>" Nothing happens. The
sentence
runs all across the entire page. 

But if I replace the above code with "<p style="width:25px">This is a
sentence.</p>" instead, changing nothing else, then I do get the
desired behavior, except with a bit of complexity having to do with
the 'p' properties.

Why is this?  What is going on here? If the "p style" code works how
come the "span style" doesn't?  Aren't they functional equivalents
from a CSS point of view? This is driving me batty.

hapgood-ga:

Thanks for the clarification.

The reason why you are seeing the problem, is because the width
property is specifically not applicable to inline elements... and the
<span> tag is specifically used for grouping inline elements, so
officially the width property is not applicable to spans.

W3C: Block-level and inline elements
http://www.w3.org/TR/html4/struct/global.html#edef-SPAN

W3C: Visual formatting model details
http://www.w3.org/TR/REC-CSS2/visudet.html#propdef-width

So, if you are using Mozilla Firefox, or Opera, as your browser, then
you will see the results that you are seeing. If, however, you are
using Internet Explorer (at least versions 6 or 7, as far as I'm
aware), then the width attribute does work with SPAN, because
Microsoft chose to go beyond the W3C specifications:

http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/reference/properties/width_2.asp

Interestingly, Microsoft refers to the CSS1 specification where the
'width' attribute is defined; yet, in that very specification, it
specifies that 'width' only applies to block-level and replaced
elements, not to inline elements such as SPAN.

So, to answer your final question, the difference between P and SPAN,
is that P is a block-level element, while SPAN is an inline element.
Since 'width' only applies to block-level and replaced elements, a
browser that strictly conforms to the W3C specifications (such as
Firefox or Opera) will ignore the 'width' attribute within a SPAN tag,
while a less-strict browser such as Internet Explorer, will let it
work.

Note that if your page design permits you to replace your SPAN tag
with a properly-used DIV, then you can use the width attribute.

Regards,

aht-ga
Google Answers Researcher

Clears up all my outstanding questions.  Excellent answer.

the following code is ok by ie and firefox.So,maybe you check you code.
/*****************************************************************************
<p>This is a paragraph <span style="color:#0000FF;">This is a
paragraph</span> This is a paragraph</p>
<p>
<span style="color:#00DD45;width=25px">
This is another paragraph
</span>
</p>
******************************************************************************/
Hope you can resolve the problem.

from what you mentioned above it kinda sounds like you're expecting
the style to set the width of the text and not the span.  the style
will apply to the width of the span not the text.  the usage you
showed is correct for setting the width of the span.  if you want to
change the width of the text that isn't an option i'm aware of.  you
can set the font size with the font-size: property.