Search code examples
htmlcss

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>
</span>

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

Solution

  • 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.

    The li element takes the span's element height if you remove the

    col-sm-10

    class or add a

    float: none!important;

    override.