Question

我有：

<div id = "first" style="overflow-y:auto;">
<td colspan="2" style="background: #EFF4F8;"><div
id="second" style='height: 100px; word-wrap: break-word; overflow-y: auto; width: 100%; min-width: 580px; line-height: 200%;'>
<pre style="white-space: pre-wrap;">${some_text}</pre>
</div></td>
</div>

如果“some_text”宽度大于我的屏幕，那么我在所有屏幕上滚动，我只想滚动div =“second”或我的预标签。问题是我无法改变div =“first”，我必须按原样使用它。你能救我吗？

谢谢，

Answer 1

您的标记似乎有误，但这应该是您的解决方案。让我知道结果如何，我将更新您的需求的答案。并使用CSS：

<强> CSS

#first {
    overflow-y:auto;
}

#second {
    height: 100px;
    word-wrap: break-word;
    overflow-y: scroll;
    width: 100%; /* This might still mess up the overflows of parent- and child-tags in different browsers */
    min-width: 580px; /* This does not work well in all browsers */
    line-height: 200%;
}

#second pre {
    white-space: pre-wrap;
}

<强> HTML

<div id="first">
    <table>
        <tbody>
            <tr>
                <td colspan="2" style="background: #EFF4F8;">
                    <div id="second">
                        <pre>${some_text}</pre>
                    </div>
                </td>
            </tr>
        </tbody>
    </table>
</div>

Answer 2

您想要滚动宽度，即水平滚动条。你应该添加overflow-x

添加滚动到内部div

2 个答案: