我正在尝试创建一个 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，所以我可能做错了很多事情。任何其他意见表示赞赏。
最佳答案
.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;
}
关于html - 文本超出框，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14291957/