Html CSS装箱长时间不使用滚动和自动展开包装文本_Html_Css_Overflow

Html CSS装箱长时间不使用滚动和自动展开包装文本

html css

Html CSS装箱长时间不使用滚动和自动展开包装文本,html,css,overflow,Html,Css,Overflow,我一直在尝试使用使用创建的表来解决一个问题，当单元格中的内容超出小尺寸时，我遇到了一个丑陋的问题。在这里，我留下一个例子： <html> <head> <style type="text/css"> div.table { display: table; width: 500px; } div.tab

我一直在尝试使用使用创建的表来解决一个问题，当单元格中的内容超出小尺寸时，我遇到了一个丑陋的问题。在这里，我留下一个例子：

<html>
    <head>
        <style type="text/css">
            div.table {
                display: table;
                width: 500px;
            }
            div.table div.row {
                display: table-row;
            }
            div.table div.row div {
                display: table-cell;
                border: 2px solid red;
            }
            #BOX {
                border: 5px solid green;
                overflow-x: scroll;
                overflow-y: hidden;
                width: 300px;
            }
            #TEXT {
                white-space: nowrap;
            }
        </style>
    </head>
    <body>
        <div class="table"><div class="row">
            <div>HELLO WORLD</div>
            <div id="BOX">
                <span id="TEXT">
                    aaaaaaaaaaaa aaaaaaaaaaaa
                </span>
            </div>
            <div>HELLO WORLD</div>
        </div></div>
    </body>
</html>


分区表{
显示：表格；
宽度：500px；
}
div.table div.row{
显示：表格行；
}
div.table div.row div{
显示：表格单元格；
边框：2倍纯红；
}
#盒子{
边框：5px纯绿色；
溢出-x：滚动；
溢出y：隐藏；
宽度：300px；
}
#正文{
空白：nowrap；
}
你好，世界
aaaaaaaaaaaaaaaaaaaaaaaaaa
你好，世界

我需要什么：

当“text”的文本较短时，它看起来像这样：

我不想要的：

当“text”的文本较长时，central将展开，直到它可以容纳所有文本，并且表格也会根据需要变宽。大概是这样的：

问题：

有人知道我该怎么做吗

注意：我只需要它水平滚动，“框”的宽度不能固定。

试试这样的方法？它会迫使细胞保持一定的宽度

#TEXT { width: 150px;}

或者甚至

#TEXT { max-width: 150px;}

我尝试将宽度设置为150px，然后设置为文本，然后设置为框，同时将两者都设置为，但我仍然有相同的行为。反正是thanx

#TEXT {
    white-space: nowrap;
    max-width: 300px;
    display: inline-block;
    overflow-x: scroll;
}