html - 溢出时扩展百分比宽度

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