我正在尝试构建一种票务系统,其中每个票证是一个div
,并且其中还有其他嵌套的div
以便更好地容纳内容。除了图像和其他类型的媒体,它还有一个纯文本区域,其中将显示票证的描述。
一切都会正常进行,但是当我打印说明时,文本将水平继续而不是垂直继续。反过来,这会产生水平溢出,并且div
包含文本显然超出了我为其分配的100%宽度(据我所知,它填充了其父div宽度)。
文本在span
标记内,该标记又在描述div
内。我正在从接收客户端的JSON提取文本,而我只是串联在一起,即:var description = receivedJson.description;
var desDiv = '<div class="description"><span>'+description+'</span></div>';
我认为部分问题是我将所有内容串联在一起。这是一个demo,但是同样,由于它不是动态替换文本,因此它可以正常工作并且不能正确再现该问题。
这是实际发生的情况:
当我只需要垂直滚动条时(如果需要),我得到了两个滚动条。即使没有文本,我也会得到滚动条(可能是由于该span
标签上存在填充的原因,但是如何获得文本和div之间的间距?)。
如何使文本垂直显示,并且仅当文本超过div
的高度时才获得垂直滚动条?
最佳答案
.c span {
display: inline-block;
height: 100%;
padding: 1em 2em;
background-color: red;
}
去除宽度:100%。这应该工作正常:)