jquery - 文本不下降一行，溢出 :hidden, jScrollpane

Question

我正在尝试使用 jScrollPane ( jscrollpane.kelvinluck.com ) 来显示一系列图像，以及一个水平的 div。我设法使一系列图像工作，但是当我创建 div 时，其中的内容要么 (a) 超出 div，要么 (b) 当我标记它溢出时:隐藏，它继承了滚动效果，因此不会下线。

我想做的是让我的 div 中的文本像普通文本一样，当它接近容器的宽度时下拉一行。

这是我的代码，

<div class="scroll-pane">                                                                           
    <ul>
        <li ><img src="img/portfolio1.gif" /> <span></span></li>
        <li ><img src="img/portfolio2.gif"/> <span></span></li>
        <li ><img src="img/portfolio3.gif"/> <span></span></li>
        <li>
            <div class="info">
                <h2>Modern Palace Resident</h2>
                <p>This is going to describe the apartment a little bit, including design philosophy, themes for the apartments, and why you chose to do it this way. This can excite them about the apartment, which will lead them to buy. You can leave a link <a href="apt.php">here</a> as well.</p>
            </div>
        </li>
    </ul>
</div>

这是相关的SCSS

.scroll-pane{
    width: 100%;
    height: 450px;
    overflow: scroll;
    white-space:nowrap;

    ul {
        float:left;
        list-style-type:none;
        li{
            float:left;
            .info{
                float:left;
                width:300px;
                height:420px;
                background-color:gray;
                overflow:hidden;
            }
            img{
                height:420px;
            }
        }
    }
}

相关部分是

.info{
    float:left;
    width:300px;
    height:420px;
    background-color:gray;
    overflow:hidden;
}

我需要在这里编辑什么，以便 h2 和 p 遵守 .info 容器？

这可能吗？

Answer 1

我什至不确定 CSS 在上述语法中是如何工作的。我不得不改变它，让它在一开始就像这样在 fiddle 中工作:

.scroll-pane{
    width: 100%;
    height: 450px;
    overflow: scroll;
    white-space:nowrap;
}

.scroll-pane ul{
    float:left;
    list-style-type:none;
}

.scroll-pane ul li{
    float:left;
}

.scroll-pane ul li img{
    height:420px;
}

.info{
    display: block;
    clear: left;
    width:300px;
    height:420px;
    background-color:gray;
    overflow:hidden;
}

无论如何，您的文本没有换行的原因是因为在您的 .scroll-pane 样式中您设置了 white-space:nowrap;，它由您的容器。

要使信息文本换行，请将 white-space:normal; 添加到 .info。

DEMO

因为我必须手动修复 CSS 才能在 fiddle 中首先工作，如果有什么地方看起来不对，请随时告诉我，或者添加您自己的 fiddle 并发布链接，我会查看它。

尽管如此，包装应该是你添加 white-space:normal; 到 .info 样式的包装