Make text resize on window resize without going to newline

Question

I've this bootstrap top bar

http://jsfiddle.net/MmcEj/

and I want to make the text contained in

<ul class="nav image-title-container">
    <li class="hidden-desktop image-title icon">somelongtitlesomelongtitlesomelongtitlesomelongtitlesomelongtitle</li>
</ul>

be as large as possible until it reaches the rigth button and wrap when you resize the window without having to use the % width since most of the time it doesn't use the whole available space nor having the text going into a new line.

Answer 1

Using media queries. Try this http://www.mrgeek.me/technology/tutorials/web-design/how-to-make-text-responsive-in-bootstrap/

Answer 2

I think the easiest way would be to use FitText