1

タイトルとテキストが入った 128px x 192x のボックスを作成しようとしています。テキストが長すぎる場合は、スクロール バーを表示してテキストをスクロールしたいのですが、タイトルはスクロールしないでください。

問題は、テキストがボックスの境界からはみ出していることです。

どうすればこれを修正できますか?

JSFiddle: http://jsfiddle.net/qr8aK/

html:

<body>
<h1>JavaScript sample</h1>

<div id="square"></div>

<div class="card-front">
  <div class="card-title">Hello Friends</div>
  <img class="card-image" src="grizzly.jpg">
  <div class="card-text">
  hello friends
  hello friends
  hello friends
  hello friends
  hello friends
  hello friends
  hello friends
  hello friends
  hello friends
  hello friends
  hello friends
  hello friends
  hello friends
  hello friends
  hello friends
  hello friends
  hello friends
  hello friends
  hello friends
  hello friends
  hello friends
  hello friends
  </div>
</div>    
</body>

CSS:

.card-front {
  width: 128px;
  height: 192px;
  background-color: green;
  border: 2px inset gray;
}

.card-title {
  width: 90%;
  height: 1em;
  background-color: white;
  border: 0px;
  text-align: center;
  margin-top: 4px;
  margin-left: auto;
  margin-right: auto;
}

.card-text {
  width : 90%;
  height: auto;
  display: block;
  margin-top: 4px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 4px;
  overflow: auto;
  background-color: white;
}

HTML と CSS を使用するのはこれが初めてなので、おそらく多くのことを間違っています。その他のコメントをお待ちしております。

4

4 に答える 4

2

cssoverflowプロパティを試す

.card-front {
  width: 128px;
  height: 192px;
  background-color: green;
  border: 2px inset gray;
  overflow-y:scroll;
}

ジャスフィドル

編集済み

.card-text {
  width : 90%;
  overflow-y:scroll;

  display: block;
  margin-top: 4px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 4px;
 height:150px;

 background-color: white;
 }

ジャスフィドル

于 2013-01-12T09:24:32.943 に答える
2 
.card-text {
  width : 90%;
  height: 150px;//specify height
  display: block;
  margin-top: 4px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 4px;
  overflow: auto;
  background-color: white;

}

デモ

于 2013-01-12T09:26:15.560 に答える
1

試す

overflow:scroll;

これにより、テキストがオーバーフローしたときにスクロール バーが表示されます。

于 2013-01-12T09:25:10.167 に答える
1

高さを定義し、カード テキストにオーバーフローを追加する必要があります。

.card-text {
width : 90%;
height: 155px;
display: block;
margin-top: 4px;
margin-left: auto;
margin-right: auto;
margin-bottom: 4px;
background-color: white;
overflow:scroll;
}
于 2013-01-12T09:28:12.717 に答える