Bootstrap CSS - Long text will bleed outside of a panel [duplicate]

Question

I have a very long string that I'd like to put into a panel using the Bootstrap CSS library. My HTML looks something like this:

 <div class="panel panel-primary">
      <div class="panel-heading">Panel</div>
        <div class="panel-body">                
           rPjW^j)hkP9WHwkyP_LjjzX.f9F5CsX2S9aKu4nFgJKW3Czv^bLUjbdy,rPjW^j)hkP9WHwkyP_LjjzX.f9F5CsX2S9aKu4nFgJKW3Czv^bLUjbdy,rPjW^j)hkP9WHwkyP_LjjzX.f9F5CsX2S9aKu4nFgJKW3Czv^bLUjbdy,rPjW^j)hkP9WHwkyP_L
        </div>
    </div>

http://jsfiddle.net/w8p9jc5j/

The result is that the text bleeds outside of the panel and I'd rather it word wrap inside the panel. The problem is that the text has no spaces so natural word wrap doesn't work here. How can I force it to word wrap anyways?

Answer 1

you're missing this

 .panel-body  {
    word-break:break-all
}