溢出时延长百分比宽度

Question

I have the following html:

<p style="margin:auto;border:solid 1px red;width:40%;">
<span style="white-space:nowrap;">a very long word i dont wont to break and this is very very very important</span>
</p>

I want the p tag to extend if the span needs it to be wider than 40% (like the example above)

How can I do that? (CSS solution is preferred if possible)

Answer 1

Use min-width instead of width .

<p style="margin:auto;border:solid 1px red;min-width:40%;">
<span style="white-space:nowrap;">a very long word i dont wont to break and this is very very very important</span>
</p>

If you use display: inline-block; as well, then the <p> will "shrinkwrap" itself to the width of its children:

<p style="margin:auto;border:solid 1px red;min-width:40%;display:inline-block;">
<span style="white-space:nowrap;">a very long word i dont wont to break and this is very very very important</span>
</p>

Demo

Answer 2

I used JavaScript for the solution, by checking if <p> is wider than its content area. I checked if the scrollWidth of <p> is larger than its clientWidth and if so I changed its width.

Answer 3

Anat:I want to handle 2 different scenarios: (1) span with white-space:nowrap, and then I want the p to expand to the width of its child. (2)span can be without white-space:nowrap and then I want the width of p to be 40%. The solution you offered only answers the first scenario.

You want the style behaviour of one element to change depending on the style of another element. I don't believe this is possible in CSS 2.1. The only way I can come up with, that will do what you want is to get rid of the span, and give the pa different class according to the different scenarios that you present. Scenario 1: text should be no-wrap and p should be as wide as required for the text:

<p class="s1">

Scenario 2:

should be no wider than 40% and text should wrap:

<p class="s2">

Styles:

<style>
s1 {
 margin:auto;
 border:solid 1px red;
 white-space:nowrap;
 display:inline-block;
}
s2 {
 margin:auto;
 border:solid 1px red;
 width: 40%;
}
</style>