Horizontales Scrollen für Hauptdiv aktivieren

Question

Ich habe ein Hauptdiv und eine Seitenleiste auf der rechten Seite (für Navigation/Filter). Das Hauptdiv wird zum Anzeigen von Logfiles verwendet und sollte unter keinen Umständen in die rechte Seitenleiste geschrieben werden.

Das Problem: Wenn eine sehr lange Nachricht ohne Leerzeichen (zum Beispiel eine lange filepath) erscheint, wird es in meinen rechten Sidebar schreiben. Stattdessen hätte ich gerne eine eigene horizontale Bildlaufleiste für dieses div.

Der Code: Ich habe ein JSFiddle geschaffen, die das Problem veranschaulicht: https://jsfiddle.net/pu9b5pu2/

Es ist über diese beiden divs hier:

<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; zum .col-xs-9 Container hinzufügen.

Ändern Sie diese Zeile aus Ihrer JSFiddle:

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

Um dies:

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

Und optional, so dass der Text auf der rechten Seite nicht bündig ist, wenn Sie alle bewegen die So können Sie padding-right: 15px; zum .message Element hinzufügen.

Answer 2

Sie können lange Wörter mit CSS brechen:

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

• https://justmarkup.com/log/2015/07/dealing-with-long-words-in-css/
• https://kenneth.io/blog/2012/03/04/word-wrapping-hypernation-using-css/
• https://css-tricks.com/almanac/properties/w/word-break/