CODEWITHSUNDEEP
htmlcss
dms
dms

Reputation: 139

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?

Upvotes: 0

Views: 68

Answers (1)

MAdEfACr
MAdEfACr

Reputation: 733

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.

Upvotes: 1

Related Questions