1

我正在尝试创建一个 128 像素 x 192 倍的框，其中包含标题和文本。如果文本太长，我希望出现一个滚动条来滚动文本，但标题不应该滚动。

问题是文本超出了框的边界。

我怎样才能解决这个问题？

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 回答