Edit in JSFiddle

var splitWords = function(str, element) {

    var parts = str.split(' ');
    var html = '';

    for (var i = 0; i < parts.length; i++) {

        var part = parts[i];
        var sep = (i != 0 || i < (parts.length - 1)) ? ' ' : '';

        html += sep + '<span class="word">' + part + '</span>' + sep;



    }

    element.html(html);
};


var h1 = $('h1', '#logo');
var text = h1.text();

splitWords(text, h1);

<div id="logo">
    <h1>ranndom text logo ranndom text logo ranndom text logo ranndom text logo ranndom text logo ranndom text logo </h1>
</div>

@import url(http://fonts.googleapis.com/css?family=Six+Caps);

#logo {
    width: 500px;
    height: 500px;
    position: relative;
    background: #eee url(https://lh4.googleusercontent.com/-kHPpKCBXtd8/T1OoARO_KUI/AAAAAAAAA5M/XSv-V_qISH8/s500/the-thinker.jpg) no-repeat 0 0;
    margin: 2em auto;
    border: 10px solid #ccc;
    border-radius: 50%;
}

#logo h1 {
    font: 6em 'Six Caps', sans-serif;
    letter-spacing: 0.1em;
    background: rgba(255, 255, 255, 0.4);
    text-align: right;
    position: absolute;
    bottom: -20px;
    left: 0;
    -moz-transition: all 500ms ease-out;
    -webkit-transition: all 500ms ease-out;
    -o-transition: all 500ms ease-out;
    -ms-transition: all 500ms ease-out;
     transition: all 500ms ease-out;
    
}

#logo h1:hover {
    background: rgba(255, 255, 255, 1);
}

#logo h1 .word {
    background: rgba(0, 0, 0, 0.8);
    color: #fff;
    margin: 5px;
    display: inline-block;
    line-height: 0.9;
    padding: 0 10px 3px 10px;
}