嵌套在 Div 内的 Span 内的水平溢出/文本答案

【问题标题】：Horizontal Overflow/Text Inside Span nested inside Div嵌套在 Div 内的 Span 内的水平溢出/文本
【发布时间】：2014-06-20 02:23:12
【问题描述】：

我正在尝试构建一种票务系统，其中每张票是一个div，并在其中嵌套了其他divs，以更好地容纳内容。除了图像和其他类型的媒体外，它还有一个纯文本区域，用于说明票证。

一切正常，但是当我打印描述时，文本继续水平，而不是垂直。这反过来会产生水平溢出，并且包含该文本的 div 显然超出了我分配给它的 100% 宽度（我理解它填充了它的父 div 宽度）。

文本位于span 标记内，而该标记又位于描述div 内。我从收到客户端的 JSON 中获取该文本，我只是在连接，即：

var description = receivedJson.description;

var desDiv = '<div class="description"><span>'+description+'</span></div>';

我认为问题的一部分是我将所有这些连接在一行中。这是demo，但同样，由于它不是动态替换文本，它有点工作并且不能正确重现问题。

这是实际发生的事情。：

当我只想要垂直的滚动条时，我得到了两个滚动条——如果且仅在需要时。即使没有文本，我也会得到滚动条（可能是我在那个 span 标记上的填充的原因，但是我如何获得文本和 div 之间的间距？）。

如何让文本垂直显示并且仅在文本超过div 的高度时才获得垂直滚动条？

【问题讨论】：

【解决方案1】：

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

删除宽度：100% 。这应该可以正常工作:)

【讨论】：