Question

我有一个主div和一个侧边栏（用于导航/过滤器）。主div用于显示日志文件，在任何情况下都不应写入右侧边栏。

问题： 当出现没有空格的非常长的消息（例如长文件路径）时，它将写入我的右侧边栏。相反，我想为这个div设置一个自己的horizantal滚动条。

代码：我创建了一个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>

Answer 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元素。

Answer 2

你可以用CSS打破长话：

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

为主div启用水平滚动

2 个答案: