水平溢出/文本内部跨度嵌套在Div内

Question

我正在尝试构建一种票务系统，其中每张票都是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的高度时才能获得垂直滚动条？

Answer 1

.c span {
display: inline-block;
height: 100%;
padding: 1em 2em;
background-color: red;
}

删除宽度：100％。这应该工作正常：）