Question

我正在尝试创建一个128px到192x的盒子，里面有标题和文字。如果文字太长，我想要一个滚动条来滚动文字，但标题不应该滚动。

问题在于文本超出了框的界限。

我该如何解决这个问题？

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，所以我可能做错了很多。任何其他意见表示赞赏。

Answer 1

尝试css overflow属性

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

Jsfiddle

<强>被修改

.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;
 }

Jsfiddle

Answer 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;

}

DEMO

Answer 3

尝试

overflow:scroll;

当文本溢出时，这将为您提供滚动条。

Answer 4

您必须在卡片文本中定义高度并添加溢出。

.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;
}

文字在盒子外面

4 个答案: