Question

我有以下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>

如果跨度需要宽度超过40％，我希望p标签扩展（如上例所示）

我该怎么做？（如果可能，首选CSS解决方案）

Answer 1

使用min-width代替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>

如果你也使用display: inline-block;，那么<p>会将自身“收缩”到其子女的宽度：

<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

我通过检查<p>是否宽于其内容区域来使用JavaScript作为解决方案。我检查scrollWidth的{{1}}是否大于<p>，如果是，我更改了宽度。

Answer 3

Anat：我想处理两种不同的场景：（1）跨越white-space：nowrap，然后我想让p扩展到它的子宽度。（2）span可以没有white-space：nowrap然后我希望p的宽度为40％。您提供的解决方案仅回答第一种情况。

您希望一个元素的样式行为根据另一个元素的样式而改变。我不相信这在CSS 2.1中是可行的。我能想到的唯一方法是做你想做的就是摆脱跨度，并根据你呈现的不同场景给p一个不同的类。场景1：文本应该是无包装的，p应该与文本所需的一样宽：

<p class="s1">

场景2：

不应超过40％且文字应该换行：

<p class="s2">

样式：

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

溢出时扩展百分比宽度

3 个答案: