隐藏在填充区域内的儿童

时间:2014-09-07 04:20:41

标签: html css padding

当我在具有填充(下面为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;
}

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

1 个答案:

答案 0 :(得分:1)

这似乎太明显了,但这不是那样做的吗?

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

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