Question

使用Twitter Bootstrap，我有一个包含以下css的div：

#notecard.hero-unit
{
    background-image: url("../img/notecard.jpg");
    background-size: cover;
    width: 60%;
    margin-left: 20%;
    margin-right: 20%;
    height: 1%;
    position: relative;
    text-align: center;
    overflow: hidden;

}

在div的内部，我有不同数量的文本h2，其中包含以下CSS：

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  font-weight: bold;
  color: #333333;
  text-rendering: optimizelegibility;
}

在#notecard.hero-unit我正在使用overflow: hidden;和height: 1%，因为大多数情况下h2的文字滚动得比#notecard更远 - 因此正在处理工作， #notecard现在扩展为h2内的文字。

但是，当h2只有一行或两行时，#notecard非常小。我希望#notecard是默认大小 - 让我们说300px并且仍然接受溢出（如果有的话）。

我已尝试在#noteard以及h2到300px的高度设置高度，但都忽略了我需要的溢出。

感谢。

Answer 1

我在H2的父级上使用最小高度：

<style>
h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-weight: bold;
  color: #333333;
  text-rendering: optimizelegibility;
}
.hero-unit {
  background-color: #eee;
  background-size: cover;
  width: 60%;
  margin-left: 20%;
  margin-right: 20%;
  min-height: 50px;
  position: relative;
  text-align: center;
  overflow: hidden;
}
</style>

<div class="hero-unit">
   <h2>Some Text</h2>
</div>
<br>

<div class="hero-unit">
   <h2>Much more text. Much more text. Much more text. Much more text. Much more text. Much more text. Much more text. Much more text. Much more text. Much more text. Much more text. Much more text. Much more text. Much more text. Much more text. Much more text. Much more text. Much more text. Much more text. Much more text. Much more text. </h2>
</div>

http://jsfiddle.net/M9bX8/5/

如何接受溢出并具有默认高度

1 个答案: