0

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;

}

h2そのdivの中には、次の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。

ただし、h21行か2行しかない場合は、#notecard非常に小さくなります。#notecardデフォルトのサイズにしたいのです300pxが、オーバーフローがあればそれを受け入れます。

#noteard高さをに設定し、高さh2をに設定してみまし300pxたが、どちらも必要なオーバーフローを無視しています。

ありがとう。

4

1 に答える 1

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/

于 2013-01-13T06:19:36.297 に答える