I have something like this:
<span class="col-sm-10" style="padding-left:0px!important;padding-right:0px!important;word-wrap:break-word;">
<a style=""> 123456789012345678901234567890</a>
The "word-wrap: break-word;" property you added does exactly what you want to do.
I believe you have an issue with Bootstrap here. The class "col-sm-10" will add a "float: left" on your element, and it will prevent you from taking benefit of the auto height of this element's children.
I think you should remove this class (it would be the better choice).
If for some reason you cannot do that, you can try to override Bootstrap's behavior by adding a float: none!important; in your inline style tag.
Edit : I did a quick pen (I had a little doubt after answering ;)), http://codepen.io/tclauzier/pen/jAZrjQ The li element takes the span's element height if you remove the
class or add a