Long text word wrapping

Testing word wrapping with a lot of text

HTML

<a style="float:right" href="http://jsfiddle.net/bgrins/qY3dQ/">edit code</a>

<p>Instructions: fill one of the containers by pressing the buttons, then resize / scroll around.  Especially try increasing the size of the window.</p>
<button onclick="showShort()">Show Short In Flexbox</button>
<button onclick="showLong()">Show Long In Flexbox</button>
<button onclick="showLongSplit()">Show Long Split Nodes In Flexbox</button>
<br />
<button onclick="showShort(true)">Show Short In Table Cell</button>
<button onclick="showLong(true)">Show Long In Table Cell</button>
<button onclick="showLongSplit(true)">Show Long Split Nodes In Table Cell</button>
<br />


<div id="flex-container">

<div class="hud-msg-node">    
    <div class="webconsole-timestamp">
        [13:44:13.701] 
    </div>
    <div class="webconsole-msg-icon">
        
    </div>
    <div class="webconsole-msg-body">message goes here</div>
</div>


<div class="hud-msg-node">    
    <div class="webconsole-timestamp">
        [13:44:13.701] 
    </div>
    <div class="webconsole-msg-icon">
        
    </div>
    <div class="webconsole-msg-body">message goes heremessage goes heremessage goes heremessage goes heremessage goes heremessage goes heremessage goes heremessage goes heremessage goes heremessage goes heremessage goes here</div>
</div>

<div class="hud-msg-node">    
    <div class="webconsole-timestamp">
        [13:44:13.701] 
    </div>
    <div class="webconsole-msg-icon">
        
    </div>
    <div id="wrapper" class="webconsole-msg-body">message goes here</div>
</div>

</div>

<div id="wrapper2"></div>

<table id="table-wrapper">
    <td style="width: 10%">[13:44:13.701]</td>
    <td style="width: 10%"></td>
    <td id="wrapper3">
        
    </td>
</table>

CSS

#wrapper2 {
  white-space: pre-wrap;
  word-wrap: break-word;
  font-family: monospace;
}
#table-wrapper {
    width: 100%;
    table-layout: fixed;
}
#wrapper3 {
    width: 80%;
}    
#table-wrapper td {
  white-space: pre-wrap;
  word-wrap: break-word;
  font-family: monospace;
}
.hud-msg-node {
  display: flex;
  flex: 0 0 auto;
  -moz-padding-start: 6px;
  -moz-padding-end: 8px;
  -moz-box-sizing: border-box;
  width: 100%;
}

.webconsole-timestamp {
  flex: 0 0 auto;
  color: GrayText;
  margin: 4px 0;
  font-family: monospace;
  font-size: 0.9em;
}

.webconsole-msg-icon {
  background: -moz-image-rect(url(chrome://browser/skin/devtools/webconsole.png), 0, 1, 0, 0) no-repeat;
  background-position: center 0.3em;
  flex: 0 0 auto;
  margin: 0 6px;
  padding: 0 4px;
  width: 8px;
}


.webconsole-msg-body {
  flex: 1 1 100%;
  /* Make sure the message body is very small initially, let flex change width
   * as needed. */
  width: 300px;
  white-space: pre-wrap;
  word-wrap: break-word;
  font-family: monospace;
}