CSS拳击长不裹带滚动文本，而不是autoexpands

我一直在尝试使用创建的表来解决问题使用<DIV> </DIV >并且在单元里面的东西超越小我有一个丑陋的问题尺寸。这里，我离开一个例子：CSS拳击长不裹带滚动文本，而不是autoexpands

<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

我不要什么”想要：

当“文字”的文字很长时，中央<div>展开，直到它可以容纳所有的东西，桌子也变得像需要的一样宽。事情是这样的： not what I wanted

问题：

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

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

来源

2013-05-28 DAEMonRaco

尝试这样？它应该强制该单元格保持一定的宽度。

#TEXT { width: 150px;}

，或者甚至......

#TEXT { max-width: 150px;}

来源

2013-05-28 19:35:20 Zamphatta

我试图设置宽度为150px到#TEXT，然后#BOX，并且也都在同时，但我仍然有相同的行为。 thanx无论如何 – DAEMonRaco

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

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

来源

2013-05-28 19:37:12 isherwood

就是这样！，做到了。非常感谢你 – DAEMonRaco

CSS拳击长不裹带滚动文本，而不是autoexpands

回答

相关问题