Question

我尝试显示水平滚动条。但是它不是水平滚动条而是增加div的高度，如果我改变overfolw-x：滚动到溢出：滚动它显示我垂直滚动条。以下是代码。提前谢谢。

<html>
<head>
    <title></title>
</head>
<body>
    <div id="main">
        <table style="width:800px; height:500px;border:1px solid black">
            <tr style="height:200px;border:1px dotted red;">
                <td>Test Text</td>
            </tr>
            <tr style="height:200px;border:1px dotted green;">
                <td>
                <div style="width:100%;height:100%;overflow-x:scroll;">
                    Hello this is a testing text to make sure that the division overflow. 
                    Thanks for visiting. bla bla bla bla bla bla bla bla bla bla bla bla bla 
                    bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
                    bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
                    bla bla bla bla bla bla bla bla bla bla bla bla blabla bla bla bla bla 
                    bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla 
                    bla bla bla bla bla bla bla blabla bla bla bla bla bla bla bla bla bla 
                    bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla 
                    bla bla blabla bla bla bla bla bla bla bla bla bla bla bla bla bla bla 
                    bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla blabla bla 
                    bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla 
                    bla bla bla bla bla bla bla bla bla bla blabla bla bla bla bla bla bla 
                    bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla 
                    bla bla bla bla bla blackbla bla bla bla bla bla bla bla bla bla bla bla 
                    bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla 
                    blabla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla 
                    bla bla bla bla bla bla bla bla bla bla bla bla bla blabla bla bla bla 
                    bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla 
                    bla bla bla bla bla bla bla bla blabla bla bla bla bla bla bla bla bla bla 
                    bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla 
                    bla bla blackbla bla bla bla bla bla bla bla bla bla bla bla bla bla bla 
                    bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla blabla bla bla 
                    bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla 
                    bla bla bla bla bla bla bla bla bla blabla bla bla bla bla bla bla bla 
                    bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla 
                    bla bla bla bla blabla bla bla bla bla bla bla bla bla bla bla bla bla 
                    bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
                    bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla 
                    bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
                    bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
                    bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
                    bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
                    bla bla black bla bla bla bla bla bla bla bla bla bla bla bla bla bla 

                </div>
                </td>
            </tr>
        </table>
    </div>
</body>
</html>

Answer 1

您需要向div提供修复width。

我也用过：

.cont{
    white-space:nowrap;
}

如果要将文本拆分为多行，可以使用<br>标记：

检查这个小提琴：

http://jsfiddle.net/3Mjuu/3/

水平滚动条未显示

1 个答案: