我在右侧有一个主 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>
最佳答案
添加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
元素。
关于twitter-bootstrap - 为主 div 启用水平滚动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40918427/