Bootstrap CSS - Long text will bleed outside the panel

Question

I have a very long line that I would like to add to the 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/

As a result, the text bleeds outside the panel, and I would prefer this word to wrap inside the panel. The problem is that the text has no spaces, so the natural portability of words does not work here. How can I get him to wrap words anyway?

Answer 1

you miss this

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

Answer 2

I think word-wrap: break-word;for .panel-body this is what you need.