Question

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

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

当内部span标记内容过宽时，有没有人知道如何让div标签显示水平滚动条？

编辑：使用overflow：scroll使滚动条始终显示，我只希望在内部span标签内容太宽时显示滚动条。

Answer 1

通过为div css分配溢出来让文本滚动得太久。

div { overflow: scroll;}

Answer 2

如果我理解正确，你只需要在div上加宽，并在跨度上white-space: no-wrap;，以防止它向下流到下一行。如果你想要一行，也可以为div本身添加无包装。

小提琴：http://jsfiddle.net/ZmLbs/

<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>

CSS：

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

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

2 个答案: