通过Javascript设置段落CSS宽度无效

Question

In Javascript, I have a div with a paragraph inside it. I have made an effect where the div slowly expands in width & reveals the text in the paragraph below.

I set the divs width to zero, then every 10 milliseconds I increase the width by 10px. This works great because I have set the div to have overflow hidden.

My Problem: BUT the text in the paragraph wraps to the current width of the parent div, which means that the text jumps around & reformats as the width increases.

I want to remove/stop this from occuring so I explicity set the paragraphs width to 100px (the width of the div once it has completely expanded) but the problem is when I go check the CSS width of the paragraph element in Firebug, its not set, ie its not listed in the HTML elements inline CSS style?

It makes me think that a paragraph element by default has display block & ignores the width parameter, is that correct?

My ultimate question is: How can I get the paragraph element to be 100px wide? Do I need to change the display type to get the width to work?

This doesn't work:

pEle.style.width = "100px"; // maybe I need to change the display type before I set its width?

Answer 1

If I understand your question correctly you can do this just be explicitly setting a width for the paragraph in your CSS.

By default a paragraph element is block level and will take take any width you specify... Leads me to think somethings going wrong with how you're trying set the width.

Here's a quick fiddle - http://jsfiddle.net/MerlinMason/Sdq65/

Hope that helps!

Answer 2

我真的相信，可以通过将以下CSS属性添加到您的段落中来解决所有问题：

white-space: nowrap;