Question

我一直在尝试使用＆lt; div＆gt;＆lt; / div＆gt;创建的表来解决问题当一个细胞内的东西超出一个小尺寸时，我就会遇到一个难看的问题。我在这里留下一个例子：

<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>

我需要什么：

当“TEXT”文本很短时，它看起来像这样： well formatted

我不想要：

当“TEXT”的文本很长时，中心＆lt; div＆gt;扩展直到它能够容纳所有这些并且表格也变得像所需的那样宽。像这样的东西： not what I wanted

问题：

有谁知道我怎样才能让它发挥作用？

注意：我只需要水平滚动，“BOX”的宽度无法修复。

Answer 1

http://jsfiddle.net/isherwood/3YEeH/

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

Answer 2

尝试这样的事情？它应该强制该细胞保持一定的宽度。

#TEXT { width: 150px;}

或者甚至可能......

#TEXT { max-width: 150px;}

CSS拳击长期未包装的文本与滚动而不是自动扩展

2 个答案: