Question

假设我有一些固定大小的容器，并且我希望所有元素都适合内部，但是我不知道内部元素的所有高度。一些元素有很多文本，所以我设置了溢出：隐藏。但是此元素忽略容器的高度，只是拉伸以适合内容。我该怎么办？

编辑：如果我在容器上设置了溢出，则溢出的文本将被隐藏，但底部的填充将被忽略（请参见第二段）。如何从底部边框将文本剪切5px，使所有面看起来都一样？

.outer {
  width: 200px;
  height: 200px;
}

.inner {
  padding: 5px;
  background-color: #ccc;
  height: 150px;
  border: 1px solid black;
}

.text {
  overflow: hidden;
}

<div class="outer">
  <div class="inner">
    <span style="color: red">Some element so we can't make text 100% height</span>
    <div class="text">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
    </div>
  </div>
  <div>Some other text</div>
</div>

.outer {
  width: 200px;
  height: 200px;
}

.inner {
  padding: 5px;
  overflow: hidden;
  background-color: #ccc;
  height: 150px;
  border: 1px solid black;
}

.text {
  overflow: hidden;
}

<div class="outer">
  <div class="inner">
    <span style="color: red">Some element so we can't make text 100% height</span>
    <div class="text">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
    </div>
  </div>
  <div>Some other text</div>
</div>

Answer 1

您可以在.inner内嵌套一个额外的div（在本示例中，我使用.inner2，您可以使用更有意义的名称！:)）。

基本上，您需要将背景/边框与将控制溢出的容器分开（如您所愿，溢出到达元素的边缘，不需要在意填充）。

仅是一个示例，但是我在.inner2内添加了第二个div（.inner），并将height和overflow规则移到了那个位置。背景/填充/边框保持不变。

编辑：在inner2中添加了一个石灰边框，以更好地说明正在发生的事情。

.outer {
  width: 200px;
  height: 200px;

}

.inner {
  padding: 5px;
  background-color: #ccc;
  border: 1px solid black;
}
.inner2 {
    height: 150px;
    overflow: hidden;
    border: 1px solid lime;
}

.text {
  
}

<div class="outer">
  <div class="inner">
  <div class="inner2">
    <span style="color: red">Some element so we can't make text 100% height</span>
    <div class="text">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
    </div>
  </div>
  </div>
  <div>Some other text</div>
</div>

嵌套的div高度和溢出

1 个答案: