html - 将滚动添加到内部 div

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" 或我的 pre 标签。问题是我无法更改 div="first"，我必须按原样使用它。你能帮助我吗？

谢谢，

Answer 1

Your markup seems wrong, but this should be your solution. Let me know how it turns out and I will update the answer to your needs. And use 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

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