ajax ajax - 2 months ago 15x
CSS Question

How do you resize a parent of an element with a word-wrap in css?

I have something like this:

<li class="active">
<span class="col-sm-10" style="padding-left:0px!important;padding-right:0px!important;word-wrap:break-word;">
<a style=""> 123456789012345678901234567890</a>

I can't get the
class adjust its height when the text inside of
overflows its box and wraps to the next line. Is there a way to do this?


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

float: none!important;