Text within circle div. Div size adjusted to content

Question

I want to create a circle div with text in (not only one line). This is the kind behavior I want:

Answer 1

This is the best I could come up with. It works not 100% as I wanted, but it's not too far away

HTML

 

    

        
Some megathoughts
    
   

        
Lorem ipsum whatever
    
    

        
Lorem ipsum superduperlongword
    
    

        
Lorem ipsum whatever
    
    

        
Lorem 
    

SCSS

#balls {
  .ball {
    float: left;
    margin-right: 5px;
    width:50px;
    text-align: center;
    border-radius: 50%;
    vertical-align:middle;
    display:table;
    padding: 8px;
    border: 1px solid #222;
    .message {
      display:table-cell;
      vertical-align:middle;
      border-radius: 50%;
      text-align: center;
      -moz-hyphens: auto;
      -ms-hyphens: auto;
      hyphens: auto;
      word-break:break-all;
    }
  }
}

Javascript

var fix_size = function(ball){
    var size = ball.height()+10;
    ball.width(size).height(size);
};

$.each($('.ball'), function(index, ball){
        fix_size($(ball));
});

Here is a JSFiddle to demonstrate it http://jsfiddle.net/kDvMp/ The hyphens works in my application, but not in JSFiddle. the word-break: break-all; is not needed if hyphens works.