2016-12-01 81 views
0

我在右側有一個主div和一個側欄(用於導航/過濾器)。主div用於顯示日誌文件,在任何情況下都不應該寫入右側邊欄。爲主div啓用水平滾動

問題: 當一個很長的消息沒有空格(例如長文件路徑)出現時,它會寫入我的右側邊欄。相反,我想爲這個div有一個自己的水平滾動條。

代碼:我創建了一個的jsfiddle這表明了問題:https://jsfiddle.net/pu9b5pu2/

它是關於這這裏兩個div:

<div class="col-xs-9"> 
     <div class="debug"> 
      <div class="timestamp">[09:33:04.137] </div> 
      <div class="message">BlaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaBlaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaBlaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaBlaaaaBlaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div> 
     </div> 
     </div> 

     <!-- Right side bar --> 
     <div class="col-xs right-sidebar"> 
     <div id="title-sidebar"> 
      <strong id="title">Filters</strong> 
     </div> 
     <input type="checkbox" id="debug" value="value"> 
     <label for="debug">Debug messages</label> 
     </div> 
    </div> 

回答

1

添加overflow: auto;.col-xs-9容器。

更改這條線從您的jsfiddle:

<div class="col-xs-9" style="white-space: normal; word-wrap: break-word; overflow-wrap: break-word;">

要這樣:

<div class="col-xs-9" style="white-space: normal; word-wrap: break-word; overflow-wrap: break-word; overflow: auto;">

和任選的,所以當你滾動所有的文字是不正確的沖洗方式,您可以將padding-right: 15px;添加到.message元素。

+0

謝謝,這是很容易,也感謝填充理念。 – kentor

+0

任何想法如何我可以防止一個長的消息將開始在一個新的行,而不是旁邊的時間戳,例如:http://i.imgur.com/wlPLAEb.png? – kentor