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

回答

相關問題