Html 嵌套的span标记需要在外部div标记中强制执行水平滚动条

我有一个使用div标记、嵌套div标记和嵌套span标记（没有实际的表元素）创建的表。当内部span标记的内容太宽时，外部div标记的水平滚动条将不会显示。例如

<div>Some text 
  <span> Here is the suuuuuuuper wide text</span>
</div>

一些文本
这里是suuuper宽文本

有人知道当内部span标记内容变得太宽时，如何让div标记显示水平滚动条吗

---

编辑：使用溢出：滚动使滚动条始终显示，我只希望滚动条在内部跨距标记内容太宽时显示。

将溢出指定给div css，使文本滚动过长即可

div { overflow: scroll;}

---

如果我理解正确，您只需要在div上加一个宽度，并且

空白：无换行以防止其向下流到下一行。如果需要单行，还可以不向div本身添加换行

小提琴：

谢谢，这是可行的，但我只希望滚动条在需要时显示，而不是总是在那里{overflow:auto；}我也尝试过这样做，但由于某种原因，当内部span标记太宽时，外部div永远不会显示水平条。是否可能有其他类/样式为override overflow:auto？我假设div标记上的overflow:auto允许滚动条在内部span标记过宽时显示。这是默认行为，对吗？你能提供一个提琴让我更好地了解这个问题吗。
<div>Some text 
  <span> Here is the suuuuuuuper wide text</span>
</div>

<div>Some text 
  <span> Here is shorter text</span>
</div>

<div class="single-line">Some text 
  <span> Here is single-line text</span>
</div>

div {
    width: 150px;
    border: 1px solid red;
    overflow-y: auto;
}
span {
    white-space:nowrap;
}
.single-line {
    white-space: nowrap;
}