隐藏在填充区域内的儿童

Question

当我在具有填充（下面为overflow: hidden）的元素上设置#foo时，孩子的溢出部分（下面的#bar）似乎在边界处切断了如jsfiddle中所见的父母。

HTML

<div id="foo">
  <div id="bar">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  </div>
</div>

CSS

#foo{
    background-color: red;
    padding: 20px;
    overflow:hidden;
}

#bar{
    background-color: green;
    white-space: pre;
}

如何在填充区域切断孩子的内容（以便溢出不会进入链接结果中的红色区域）？

Answer 1

这似乎太明显了，但这不是那样做的吗？

#foo{
    background-color: red;
    padding: 20px;
}

#bar{
    overflow:hidden;
    background-color: green;
    white-space: pre;
}