为主div启用水平滚动

我在右侧有一个主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>

来源

2016-12-01 kentor

添加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元素。

来源

2016-12-01 19:04:04

谢谢，这是很容易，也感谢填充理念。 – kentor

任何想法如何我可以防止一个长的消息将开始在一个新的行，而不是旁边的时间戳，例如：http://i.imgur.com/wlPLAEb.png？ – kentor

你可以把长单词，CSS：

.break-word { 
    hyphens: auto;// requires lang attribute be set on target element or ancestor 
    overflow-wrap: break-word; 
    word-wrap: break-word; 
}

来源

2016-12-01 19:07:25

为主div启用水平滚动

回答

相关问题